脚本文件Exectuing内嵌脚本CDN或外部站点对HTML注入后 [英] Script File Exectuing After Inline Script With CDN or External Domain On HTML injection

查看:356
本文介绍了脚本文件Exectuing内嵌脚本CDN或外部站点对HTML注入后的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有HTML注入的问题到已加载的DOM那里的脚本文件下载后的JavaScript被加载内联。从我知道这不应该是异步和内嵌脚本应该在脚本文件之后执行。这工作如果域名是一样的调用页面,但使用​​的是CDN甚至是子做同样的事情。有什么是我应该做的返工如何,我调用这些?我发誓,我有CDN上了一个多星期这个工作之前,但也许我没有抓住这个问题。

控制台

 加载内嵌脚本
VM1400:3未捕获类型错误:无法读取属性未定义(匿名函数)的初始化
?app.members.event.js V = 204安培; _ = 1453644424985:5加载脚本文件
?app.members.event.js V = 204安培; _ = 1453644424985:71已完成脚本文件

的JavaScript

 &LT;脚本类型=文/ JavaScript的 src=\"https://test.azureedge.net/Areas/Directors/scripts/app.members.event.js?v=204\"></script>
&LT;脚本类型=文/ JavaScript的&GT;
的console.log('加载内嵌脚本');
    app.viewModel.members.event.init();
的console.log(完成联脚本');


解决方案

一种方法是使用 jQuery的getScript加入()函数

不过,preferably,您可以使用本地JavaScript加载脚本文件并运行内嵌脚本。

也许我不明白这个问题清楚了。

编辑:
这是从 HTML5规范关于脚本元素的报价。


  

如果元素有一个src内容属性,执行这些子步骤:


  
  

让SRC是元素的src属性的值。


  
  

如果src为空字符串,队列的任务​​火命名为一个简单的事件
  错误的元素,并跳过这些步骤。


  
  

相对于元素解析的src


  
  

如果previous步骤失败,队列的任务​​火命名为一个简单的事件
  错误的元素,并跳过这些步骤。


  
  

做一个潜在的CORS启用取所产生的绝对URL,
  用模式是该元素的crossorigin的当前状态
  内容属性,原点是脚本元素的起源
  文件,以及默认原点行为集玷污。


  
  

以这种方式获得的资源可以是CORS-同源
  或CORS交叉起源。这只会影响错误报告怎么回事了。


  
  

有关性能方面的原因,用户代理可能会开始获取脚本(
  只要src属性被设置上述定义相同),相反,在
  希望该元件将被插入到文档(和该
  crossorigin属性不会改变在此期间值)。无论哪种方式,
  一旦元件被插入到文档中,负载必须具有
  作为本步骤中所述启动。如果UA执行这样
  prefetching,但该元素是永远不会在文件中插入,或
  src属性是动态变化的,或者crossorigin属性
  动态改变,那么用户代理不会执行该脚本
  这样获得的,而取过程均得到有效
  浪费了。


  
  

然后,第一下列选项描述的情况
  必须遵循:


  
  

如果该元素具有src属性和元素有一个延迟
  属性和元素已被标记为插入剖析器,而
  该元件不具有异步属性必须添加的元素
  到脚本的列表的末尾,将执行时的文件
  已经完成解析与解析器的文件相关联
  创建的元素。


  
  

该任务在任务队列的网络任务源的地方,一旦
  该取算法已完成必须设置元素的准备
  是分析器执行的标志。解析器将负责执行脚本。


  
  

如果该元素具有src属性和元素已被标记
  为插入剖析器,而该元素不具有异步属性
  该元件的文档的未决解析阻塞脚本
  创建该元件的解析器。 (只能有一个这样的
  每个脚本文件在同一时间。)


  
  

该任务在任务队列的网络任务源的地方,一旦
  该取算法已完成必须设置元素的准备
  是分析器执行的标志。解析器将负责执行脚本。


  
  

如果该元素不具有src属性和元素已经
  标记为插入剖析器,而无论是创建解析器
  脚本是XML解析器或者它是一个HTML解析器的脚本筑巢
  水平不大于一,并且HTML解析器的文献或
  创建脚本元素XML解析器有一个样式表是
  阻止脚本的元素的未决解析阻塞脚本
  创建该元素的解析器的文档。 (这里只能
  每文档一个这样的剧本在同一时间。)


  
  

设置元素的准备将分析器执行的标志。解析器会
  处理执行脚本。


  
  

如果该元素具有src属性,不具有异步特性,
  并且不具有力 - 异步标志设置,必须添加的元素
  到脚本的列表的末尾,将为了尽快执行
  尽可能与脚本元素在文档相关
  时间prepare脚本算法启动。


  
  

该任务在任务队列的网络任务源的地方,一旦
  该取算法已完成必须执行下列步骤:


  
  

如果该元素是不是现在在脚本列表中的第一个元素
  将为了尽快执行尽可能向其中加入其
  上面的话标记元素为准备好,但跳过这些步骤,而不
  执行脚本呢。


  
  

执行:执行对应于第一脚本的脚本块
  在将为了执行脚本的此列表元素只要
  可能的。


  
  

这将执行脚本的这个列表中删除第一个元素
  为了尽快


  
  

如果将顺序执行脚本的这个名单,尽快
  仍然不空,并且第一条目已被标示为
  准备好了,然后跳回到步骤标记执行。


  
  

如果该元件具有SRC属性的元素必须被添加到
  一旦设定,将执行脚本尽可能文档
  当时的脚本元素的prepare脚本算法
  开始了。


  
  

该任务在任务队列的网络任务源的地方,一旦
  该取算法已完成必须执行该脚本块
  然后从组将执行的脚本删除元素
  尽快


  
  

,否则用户代理必须立即执行的脚本块,
  即使其他脚本已经执行。取外部
  脚本必须延迟元素的文件加载事件,直到
  由该联网任务源一旦资源排队任务
  被取出(上面定义的)已经运行。


从这个我认为你的外部文件是内嵌脚本块之后加载。因此,我将使用getScript加入()函数从jquery的,以确保该脚本内嵌脚本块之前加载。

I am having an issue with HTML injection into an already loaded DOM where the inline javascript is being loaded after the script file is downloaded. From what I know this should not be async and the inline script should execute after the script file. This works if the domain name is the same as the calling page, but using a CDN or even a subdomain does the same thing. Is there something I should do to rework how I am calling these? I swear this worked before as I had the CDN on for over a week but maybe I never caught this issue.

Console

Loading Inline Script
VM1400:3 Uncaught TypeError: Cannot read property 'init' of undefined(anonymous function) 
app.members.event.js?v=204&_=1453644424985:5 Loading Script File
app.members.event.js?v=204&_=1453644424985:71 Finished Script File

Javascript

<script type="text/javascript" src="https://test.azureedge.net/Areas/Directors/scripts/app.members.event.js?v=204"></script>
<script type="text/javascript">
console.log('Loading Inline Script');
    app.viewModel.members.event.init();
console.log('Finished Inline Script');

解决方案

One way is to use jquery's getScript() function.

But preferably, you may use native javascript to load the script file and then run the inline script.

Maybe i have not understood the question clearly.

Edit: This is a quote from the HTML5 spec regarding script elements.

If the element has a src content attribute, run these substeps:

Let src be the value of the element's src attribute.

If src is the empty string, queue a task to fire a simple event named error at the element, and abort these steps.

Resolve src relative to the element.

If the previous step failed, queue a task to fire a simple event named error at the element, and abort these steps.

Do a potentially CORS-enabled fetch of the resulting absolute URL, with the mode being the current state of the element's crossorigin content attribute, the origin being the origin of the script element's Document, and the default origin behaviour set to taint.

The resource obtained in this fashion can be either CORS-same-origin or CORS-cross-origin. This only affects how error reporting happens.

For performance reasons, user agents may start fetching the script (as defined above) as soon as the src attribute is set, instead, in the hope that the element will be inserted into the document (and that the crossorigin attribute won't change value in the meantime). Either way, once the element is inserted into the document, the load must have started as described in this step. If the UA performs such prefetching, but the element is never inserted in the document, or the src attribute is dynamically changed, or the crossorigin attribute is dynamically changed, then the user agent will not execute the script so obtained, and the fetching process will have been effectively wasted.

Then, the first of the following options that describes the situation must be followed:

If the element has a src attribute, and the element has a defer attribute, and the element has been flagged as "parser-inserted", and the element does not have an async attribute The element must be added to the end of the list of scripts that will execute when the document has finished parsing associated with the Document of the parser that created the element.

The task that the networking task source places on the task queue once the fetching algorithm has completed must set the element's "ready to be parser-executed" flag. The parser will handle executing the script.

If the element has a src attribute, and the element has been flagged as "parser-inserted", and the element does not have an async attribute The element is the pending parsing-blocking script of the Document of the parser that created the element. (There can only be one such script per Document at a time.)

The task that the networking task source places on the task queue once the fetching algorithm has completed must set the element's "ready to be parser-executed" flag. The parser will handle executing the script.

If the element does not have a src attribute, and the element has been flagged as "parser-inserted", and either the parser that created the script is an XML parser or it's an HTML parser whose script nesting level is not greater than one, and the Document of the HTML parser or XML parser that created the script element has a style sheet that is blocking scripts The element is the pending parsing-blocking script of the Document of the parser that created the element. (There can only be one such script per Document at a time.)

Set the element's "ready to be parser-executed" flag. The parser will handle executing the script.

If the element has a src attribute, does not have an async attribute, and does not have the "force-async" flag set The element must be added to the end of the list of scripts that will execute in order as soon as possible associated with the Document of the script element at the time the prepare a script algorithm started.

The task that the networking task source places on the task queue once the fetching algorithm has completed must run the following steps:

If the element is not now the first element in the list of scripts that will execute in order as soon as possible to which it was added above, then mark the element as ready but abort these steps without executing the script yet.

Execution: Execute the script block corresponding to the first script element in this list of scripts that will execute in order as soon as possible.

Remove the first element from this list of scripts that will execute in order as soon as possible.

If this list of scripts that will execute in order as soon as possible is still not empty and the first entry has already been marked as ready, then jump back to the step labeled execution.

If the element has a src attribute The element must be added to the set of scripts that will execute as soon as possible of the Document of the script element at the time the prepare a script algorithm started.

The task that the networking task source places on the task queue once the fetching algorithm has completed must execute the script block and then remove the element from the set of scripts that will execute as soon as possible.

Otherwise The user agent must immediately execute the script block, even if other scripts are already executing. Fetching an external script must delay the load event of the element's document until the task that is queued by the networking task source once the resource has been fetched (defined above) has been run.

From this I think that your "external" file is loaded after the inline script block. I would therefore use the "getScript()" function from jquery to make sure that the script is loaded before the inline script block.

这篇关于脚本文件Exectuing内嵌脚本CDN或外部站点对HTML注入后的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆