在 Windows 8 Metro JavaScript App 中使用 jQuery 会导致安全错误
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10859523/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using jQuery with Windows 8 Metro JavaScript App causes security error
提问by patridge
Since it sounded like jQuery was an option for Metro JavaScript apps, I was starting to look forward to Windows 8 dev. I installed Visual Studio 2012 Express RC and started a new project (both empty and grid templates have the same problem).
由于听起来jQuery 是 Metro JavaScript 应用程序的一个选项，我开始期待 Windows 8 开发。我安装了 Visual Studio 2012 Express RC 并启动了一个新项目（空模板和网格模板都有相同的问题）。
I made a local copy of jQuery 1.7.2 and added it as a script reference.
我制作了 jQuery 1.7.2 的本地副本并将其添加为脚本参考。
<!-- SomeTestApp references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/jquery-1.7.2.js"></script>
<script src="/js/default.js"></script>
Unfortunately, as soon as I ran the resulting app it tosses out a console error:
不幸的是，一旦我运行生成的应用程序，它就会抛出一个控制台错误：
HTML1701: Unable to add dynamic content ' a' A script attempted to inject dynamic content, or elements previously modified dynamically, that might be unsafe. For example, using the innerHTML property to add script or malformed HTML will generate this exception. Use the toStaticHTML method to filter dynamic content, or explicitly create elements and attributes with a method such as createElement. For more information, see http://go.microsoft.com/fwlink/?LinkID=247104.
HTML1701：无法添加动态内容 'a' 脚本试图注入动态内容，或之前动态修改的元素，这可能是不安全的。例如，使用innerHTML 属性添加脚本或格式错误的HTML 将生成此异常。使用 toStaticHTML 方法过滤动态内容，或使用 createElement 等方法显式创建元素和属性。有关详细信息，请参阅 http://go.microsoft.com/fwlink/?LinkID=247104。
I slapped a breakpoint in a non-minified version of jQuery and found the offending line:
我在非缩小版的 jQuery 中设置了一个断点，并找到了违规行：
div.innerHTML = " <link/><table></table><a href='/a' style='top:1px;float:left;opacity:.55;'>a</a><input type='checkbox'/>";
Apparently, the security model for Metro apps forbids creating elements this way. This error doesn't cause any immediate issues for the user, but given its location, I am worried it will cause capability-discovery tests in jQuery to fail that shouldn't.
显然，Metro 应用程序的安全模型禁止以这种方式创建元素。此错误不会对用户造成任何直接问题，但鉴于其位置，我担心它会导致 jQuery 中的功能发现测试失败，而这不应该。
I definitely want jQuery $.Deferredfor making just about everything easier. I would prefer to be able to use the selector engine and event handling systems, but I would live without them if I had to.
我绝对希望 jQuery$.Deferred可以让一切变得更简单。我更希望能够使用选择器引擎和事件处理系统，但如果必须的话，我宁愿没有它们。
How does one get the latest jQuery to play nicely with Metro development?
如何让最新的 jQuery 与 Metro 开发完美结合？
采纳答案by Adam Freeman
You need to edit the jQuery source so that you pass the jQuery.supportfunction to MSApp.execUnsafeLocalFunction, which disables the unsafe content checking, like this:
您需要编辑 jQuery 源，以便将jQuery.support函数传递给MSApp.execUnsafeLocalFunction，这将禁用不安全的内容检查，如下所示：
jQuery.support = MSApp.execUnsafeLocalFunction(function() {
var support,
all,
a,
select,
opt,
input,
fragment,
tds,
events,
eventName,
i,
isSupported,
div = document.createElement( "div" ),
documentElement = document.documentElement;
// lots of statements removed for brevity
return support;
});
You need to remember to remove the last pair of parenthesis - you don't need a self-executing function because execUnsafeLocalFunctionautomatically executes the function it is passed.
您需要记住删除最后一对括号 - 您不需要自执行函数，因为execUnsafeLocalFunction它会自动执行传递的函数。
I suggest that a better approach is to use the WinJS features - this includes the WinJS.Promiseobject as an alternative to deferred operations (which are themselves an implementation of the Promise pattern). And you can do some basic DOM manipulation using the WinJS.Utilitiesnamespace.
我建议更好的方法是使用 WinJS 功能 - 这包括WinJS.Promise对象作为延迟操作的替代方案（它们本身是 Promise 模式的实现）。您可以使用WinJS.Utilities命名空间进行一些基本的 DOM 操作。
You should think twice about using jQuery for deferred operations. The WinJS.Promiseobject is used throughout the Metro APIs to represent async activities and you will end up using two similar-but-different approaches.
在使用 jQuery 进行延迟操作时，您应该三思而后行。该WinJS.Promise对象在整个 Metro API 中用于表示异步活动，您最终将使用两种相似但不同的方法。
回答by Nikhil Ranjan
Here is your answer
这是你的答案
https://github.com/appendto/jquery-win8
https://github.com/appendto/jquery-win8
Its official jquery library for windows 8
适用于 Windows 8 的官方 jquery 库
回答by Rob M.
For what it's worth, I've ported the majority of jQuery core to wrap the native WinJS library. It's lightweight and provides just about everything that jQuery does with the addition of some plugins for badges, notifications, etc.
就其价值而言，我已经移植了大部分 jQuery 核心来包装本机 WinJS 库。它是轻量级的，通过添加一些用于徽章、通知等的插件，提供了 jQuery 所做的几乎所有事情。
It is a work in progress, but I'm trying to get some people to join in the fun.
这是一项正在进行的工作，但我正在努力让一些人加入进来。
https://github.com/rmcvey/winjq
https://github.com/rmcvey/winjq
Quick write-up (documentation is being added to): http://practicaljs.com/jquery-in-windows-8-apps/
快速撰写（文档正在添加）：http: //practicaljs.com/jquery-in-windows-8-apps/
回答by Sagar Sane
After the recent //Build/ 2012conference and this talktalks about using jQuery in Windows 8 Store Apps. Specifically, they talk about the exact exception of script injectioninside innerHTML, and talk about the updates done in this.
在最近的//Build/ 2012会议之后，本次演讲讨论了在 Windows 8 Store Apps 中使用 jQuery。具体来说，他们讨论了innerHTML内部脚本注入的确切异常，并讨论了在此完成的更新。
The company AppendToalso officially unveiled jQuery for Windows 8during that talk. It looks neat from the demonstration given in the talk in the link about.
在那次演讲中，AppendTo公司还正式发布了适用于 Windows 8 的 jQuery。从链接中的谈话中给出的演示来看，它看起来很整洁。
They also say that it is not a good idea to get jQuery from CDN for Windows 8 Apps in Local Context!
他们还说从 CDN 为本地上下文中的 Windows 8 应用程序获取 jQuery 不是一个好主意！
回答by buildwinjs
The JavaScript Dynamic Content shimon GitHub was created and released by Microsoft Open Technologies to address this error. It has not been tested with jQuery but will most likely solve your problem. Reference the winstore-jscompat.js file in the beginning of your app before any other scripts are run and you should no longer see this error.
GitHub 上的JavaScript 动态内容 shim是由 Microsoft Open Technologies 创建和发布的，以解决此错误。它尚未使用 jQuery 进行测试，但很可能会解决您的问题。在运行任何其他脚本之前，在您的应用程序开头引用 winstore-jscompat.js 文件，您应该不会再看到此错误。
回答by Chris Tavares
I've done a little more investigation, and wanted to clarify a couple of things.
我做了更多的调查，并想澄清一些事情。
The error you see is in the JavaScript console, not an actual exception. The jQuery code continues to run just fine. It's actually something the underlying system is logging, not an error or exception.
您看到的错误是在 JavaScript 控制台中，而不是实际的异常。jQuery 代码继续运行得很好。它实际上是底层系统正在记录的东西，而不是错误或异常。
There's no reason to patch jQuery or do anything else - it's a noisy system component, not an actual error.
没有理由修补 jQuery 或做任何其他事情——它是一个嘈杂的系统组件，而不是一个实际的错误。
回答by Dave Voyles
I wrote a pretty detailed explanation on how to get jQuery to work with Windows 8 here http://davidvoyles.wordpress.com/2013/09/23/hacking-jquery-to-work-in-windows-8/
我在http://davidvoyles.wordpress.com/2013/09/23/hacking-jquery-to-work-in-windows-8/写了一个关于如何让 jQuery 与 Windows 8 一起工作的非常详细的解释
回答by Nicolas Ramz
If you still need it, I am writting a reimplementation of the Deferred object found in jQuery.
如果您仍然需要它，我正在编写在 jQuery 中找到的 Deferred 对象的重新实现。
Once finished it should be 100% compatible with jQuery's Deferred object. Right now it's quite complete but needs some testing.
一旦完成，它应该与 jQuery 的 Deferred 对象 100% 兼容。现在它很完整，但需要一些测试。
See this.
看到这个。
Hope this will help!
希望这会有所帮助！
That said, I think it should be a good idea to learn how to use Microsoft's implementation of Promise instead of jQuery when working on Windows 8 apps.
也就是说，我认为在处理 Windows 8 应用程序时学习如何使用 Microsoft 的 Promise 实现而不是 jQuery 应该是一个好主意。
回答by fpintos
I was able to eliminate the problem by finding all places in jQuery that set innerHTML and wrapping the value being set with toStaticHTML().
我能够通过在 jQuery 中找到所有设置 innerHTML 的位置并将设置的值包装为toStaticHTML().
So, for example:
因此，例如：
div.innerHTML = " <link/><table></table><a href='/a' style='color:red;float:left;opacity:.55;'>a</a><input type='checkbox'/>";
became:
变成了：
div.innerHTML = toStaticHTML(" <link/><table></table><a href='/a' style='color:red;float:left;opacity:.55;'>a</a><input type='checkbox'/>");
To be safe, I've also defined this just before jQuery is defined, in case the file is used in a normal browser:
为安全起见，我还在定义 jQuery 之前定义了它，以防在普通浏览器中使用该文件：
window.toStaticHTML = window.toStaticHTML || function (s) { return s; };
To me that seemed to be the safest change, although it required patching a dozen places in jQuery. (don't use a var statement before the toStaticHTML)
对我来说，这似乎是最安全的更改，尽管它需要在 jQuery 中修补十几个地方。（不要在 toStaticHTML 之前使用 var 语句）
回答by Dave Methvin
I believe this is the same restriction as imposed by Content Security Policy (CSP). That specific case was addressed in jQuery 1.8.0. Does the problem still occur there?
我相信这与内容安全策略 (CSP) 施加的限制相同。这个特殊情况在 jQuery 1.8.0 中得到了解决。问题还在那里发生？
https://github.com/jquery/jquery/commit/dc83072878ed9636c8158a014bd9fa4acc1ccce3
https://github.com/jquery/jquery/commit/dc83072878ed9636c8158a014bd9fa4acc1ccce3
