noconflict - El uso de jQuery con Windows 8 Metro JavaScript App causa un error de seguridad

jquery.noconflict() example

Question

Como parecía que jQuery era una opción para las aplicaciones de JavaScript de Metro , estaba empezando a esperar el desarrollo de Windows 8. Instalé Visual Studio 2012 Express RC y comencé un nuevo proyecto (tanto las plantillas vacías como las cuadrículas tienen el mismo problema).

Hice una copia local de jQuery 1.7.2 y la agregué como referencia de script.

<!-- SomeTestApp references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/jquery-1.7.2.js"></script>
<script src="/js/default.js"></script>

Desafortunadamente, tan pronto como ejecuté la aplicación resultante arrojó un error de consola:

HTML1701: no se puede agregar el contenido dinámico ''a'' Un script intentó inyectar contenido dinámico, o elementos previamente modificados dinámicamente, que podrían ser inseguros. Por ejemplo, el uso de la propiedad innerHTML para agregar script o HTML mal formado generará esta excepción. Utilice el método toStaticHTML para filtrar contenido dinámico o crear elementos y atributos explícitamente con un método como createElement. Para obtener más información, vea http://go.microsoft.com/fwlink/?LinkID=247104 .

Le di una bofetada a un punto de interrupción en una versión no minificada de jQuery y encontré la línea ofensiva :

div.innerHTML = "   <link/><table></table><a href=''/a'' style=''top:1px;float:left;opacity:.55;''>a</a><input type=''checkbox''/>";

Aparentemente, el modelo de seguridad para aplicaciones Metro prohíbe crear elementos de esta manera . Este error no causa ningún problema inmediato para el usuario, pero dada su ubicación, me preocupa que las pruebas de descubrimiento de capacidades en jQuery fallarán.

Definitivamente quiero jQuery $.Deferred por hacer que todo sea más fácil. Preferiría poder usar el motor selector y los sistemas de manejo de eventos, pero viviría sin ellos si tuviera que hacerlo.

¿Cómo se obtiene la última jQuery para jugar bien con el desarrollo de Metro?

Answer 1

Aquí está tu respuesta

https://github.com/appendto/jquery-win8

Su biblioteca jquery oficial para Windows 8

Answer 2

Creo que esta es la misma restricción impuesta por Content Security Policy (CSP). Ese caso específico fue tratado en jQuery 1.8.0. ¿El problema todavía ocurre allí?

https://github.com/jquery/jquery/commit/dc83072878ed9636c8158a014bd9fa4acc1ccce3

Answer 3

Después de la reciente conferencia // Build / 2012 y de esta charla, se habla sobre el uso de jQuery en Windows 8 Store Apps. Específicamente, hablan sobre la excepción exacta de la inyección de script dentro de innerHTML , y hablan sobre las actualizaciones hechas en esto.

La compañía AppendTo también presentó oficialmente https://github.com/appendto/jquery-win8 durante esa charla. Se ve limpio de la demostración dada en la charla en el enlace.

¡También dicen que no es una buena idea obtener jQuery de CDN para aplicaciones de Windows 8 en contexto local!

Answer 4

Escribí una explicación bastante detallada sobre cómo hacer que jQuery funcione con Windows 8 aquí http://davidvoyles.wordpress.com/2013/09/23/hacking-jquery-to-work-in-windows-8/

Answer 5

He investigado un poco más y quería aclarar un par de cosas.

El error que ves está en la consola de JavaScript, no es una excepción real. El código jQuery sigue funcionando bien . En realidad, es algo que el sistema subyacente está registrando, no es un error o una excepción.

No hay razón para parchar jQuery o hacer cualquier otra cosa: es un componente ruidoso del sistema, no es un error real.

Answer 6

La corrección de contenido dinámico de JavaScript en GitHub fue creada y lanzada por Microsoft Open Technologies para solucionar este error. No se ha probado con jQuery pero lo más probable es que resuelva su problema. Consulte el archivo winstore-jscompat.js al principio de la aplicación antes de ejecutar cualquier otra secuencia de comandos y ya no debería ver este error.

Answer 7

Por lo que vale, he portado la mayoría del núcleo jQuery para envolver la biblioteca WinJS nativa. Es ligero y proporciona casi todo lo que jQuery hace con la adición de algunos complementos para insignias, notificaciones, etc.

Es un trabajo en progreso, pero estoy tratando de que algunas personas se unan a la diversión.

https://github.com/rmcvey/winjq

Redacción rápida (se está agregando documentación): http://practicaljs.com/jquery-in-windows-8-apps/

Answer 8

Pude eliminar el problema al encontrar todos los lugares en jQuery que configuran innerHTML y toStaticHTML() el valor establecido con toStaticHTML() .

Así por ejemplo:

div.innerHTML = "   <link/><table></table><a href=''/a'' style=''color:red;float:left;opacity:.55;''>a</a><input type=''checkbox''/>";

convirtió:

div.innerHTML = toStaticHTML("   <link/><table></table><a href=''/a'' style=''color:red;float:left;opacity:.55;''>a</a><input type=''checkbox''/>");

Para estar seguro, también he definido esto justo antes de que se defina jQuery, en caso de que el archivo se use en un navegador normal:

window.toStaticHTML = window.toStaticHTML || function (s) { return s; };

Para mí, ese parecía ser el cambio más seguro, aunque requería parchar una docena de lugares en jQuery. (no use una declaración var antes de toStaticHTML)

Answer 9

Si aún lo necesita, estoy escribiendo una reimplementación del objeto Diferido encontrado en jQuery.

Una vez finalizado, debe ser 100% compatible con el objeto diferido de jQuery. En este momento es bastante completo, pero necesita algunas pruebas.

Mira this

Espero que esto ayude!

Dicho esto, creo que debería ser una buena idea aprender a utilizar la implementación de Promise de Microsoft en lugar de jQuery cuando se trabaja en aplicaciones de Windows 8.

Answer 10

jQuery en sí mismo no arrojó tales excepciones en la última versión, siempre y cuando haya reemplazado todo el código del formulario, por ejemplo:

$(''<input type="button" value="Press Me" />'')

con

$(toStaticHTML(''<input type="button" value="Press Me" />''))

Tenga en cuenta que no todas las cadenas de HTML se consideran inseguras, por ejemplo:

$(''<span></span>'')

No arroja ninguna excepción. Sin embargo, jQuery todavía arroja excepciones sobre anexar si haces algo de ese tipo:

var div = ''<div class="'' + classesToApply + ''"'';
div += attrToAdd;
div += ''</div>'';

$(div).appendTo(container);

Lo anterior no es un ejemplo de buenas prácticas con jQuery, pero algunas personas lo hacen, por lo que puede encontrar el error. Tenga en cuenta que el código anterior no genera el mismo error que el primer fragmento, sino que arroja el error dentro de jQuery.append. Este error aún se soluciona al realizar $(toStaticHTML(div)).appendTo(container);

Answer 11

jQuery.support editar la fuente de jQuery para pasar la función MSApp.execUnsafeLocalFunction a MSApp.execUnsafeLocalFunction , que desactiva la verificación de contenido inseguro, como esta:

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;
});

execUnsafeLocalFunction recordar eliminar el último par de paréntesis: no necesita una función autoejecutable porque execUnsafeLocalFunction ejecuta automáticamente la función que se pasa.

Sugiero que un mejor enfoque es usar las características de WinJS, esto incluye el objeto WinJS.Promise como una alternativa a las operaciones diferidas (que a su vez son una implementación del patrón Promise). Y puede hacer alguna manipulación básica de DOM utilizando el espacio de nombres WinJS.Utilities .

Debe pensar dos veces antes de usar jQuery para operaciones diferidas. El objeto WinJS.Promise se usa en todas las API de Metro para representar actividades asíncronas y terminará utilizando dos enfoques similares pero diferentes.