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


Dado que sonaba como jQuery era una opción para Metro JavaScript aplicaciones, estaba empezando a mirar hacia adelante a Windows 8 dev. Instalé Visual Studio 2012 Express RC y comencé un nuevo proyecto (tanto las plantillas vacías como las de cuadrícula 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, arroja un error de consola:

HTML1701: No se puede agregar dinámica contenido ' a ' Un script intentó inyectar contenido dinámico, o elementos previamente modificados dinámicamente, que podrían ser inseguros. Para ejemplo, usando 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 explícitamente elementos y atributos con un método como createElement. Para obtener más información, consulte http://go.microsoft.com/fwlink/?LinkID=247104 .

Abofeteé a 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 Metro apps 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 cause que las pruebas de detección de capacidades en jQuery fallen que no deberían.

Definitivamente quiero jQuery $.Deferred para hacer casi todo más fácil. Yo preferiría ser capaz de utilizar el motor selector y sistemas de manejo de eventos, pero viviría sin ellos si tuviera que hacerlo.

¿Cómo se obtiene la última jQuery para jugar muy bien con Metro development?

Author: patridge, 2012-06-02

11 answers

Necesita editar el código fuente de jQuery para pasar la función jQuery.support a MSApp.execUnsafeLocalFunction, que deshabilita la comprobación de contenido no seguro, de la siguiente manera:

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

Debe recordar eliminar el último par de paréntesis - no necesita una función autoejecutable porque execUnsafeLocalFunction ejecuta automáticamente la función que se le 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 son a su vez una implementación del patrón Promise). Y puedes hacer alguna manipulación básica del DOM usando el espacio de nombres WinJS.Utilities.

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

 33
Author: Adam Freeman,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-06-02 12:46:01

Aquí está tu respuesta

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

Su biblioteca oficial de jquery para windows 8

 8
Author: Nikhil Ranjan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-11-13 14:26:54

Por si sirve de algo, he portado la mayoría del núcleo de jQuery para envolver la biblioteca nativa de WinJS. 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 conseguir que algunas personas se unan a la diversión.

Https://github.com/rmcvey/winjq

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

 7
Author: Rob M.,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-10-21 11:21:52

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

La compañía appendTo también dio a conocer oficialmente jQuery para Windows 8 durante esa charla. Se ve limpio de la demostración dada en la charla en el enlace acerca de.

También dicen que no es una buena idea para obtener jQuery de CDN para Windows 8 Aplicaciones en Contexto Local!

 7
Author: Sagar Sane,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-11-07 04:31:27

El shim de Contenido dinámico de JavaScript en GitHub fue creado y lanzado por Microsoft Open Technologies para corregir este error. No ha sido probado con jQuery, pero lo más probable es que resuelva su problema. Referencia el winstore-jscompat.archivo js al principio de su aplicación antes de que se ejecuten otros scripts y ya no debería ver este error.

 6
Author: buildwinjs,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-08-19 18:38:53

He hecho un poco más de investigación, y quería aclarar un par de cosas.

El error que ve está en la consola JavaScript, no es una excepción real. El código jQuery continúa ejecutándose bien. En realidad, es algo que el sistema subyacente está registrando, no un error o excepción.

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

 2
Author: Chris Tavares,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-06-12 19:54:10

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 /

 1
Author: Dave Voyles - MSFT,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-09-23 20:56:58

Si todavía lo necesita, estoy escribiendo una reimplementación del objeto Diferido que se encuentra en jQuery.

Una vez terminado debería ser 100% compatible con el objeto Diferido de jQuery. En este momento es bastante completo, pero necesita algunas pruebas.

Ver esto.

Espero que esto ayude!

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

 0
Author: Nicolas Ramz,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-06-21 08:25:33

Creo que esta es la misma restricción que impone la Política de Seguridad de Contenido (CSP). Ese caso específico se abordó en jQuery 1.8.0. ¿El problema todavía ocurre allí?

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

 0
Author: Dave Methvin,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-08-11 01:53:20

JQuery en sí no lanzó tales excepciones para mí en la última versión, siempre y cuando reemplace todo el código de la forma, por ejemplo:

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

Con

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

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

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

No arroja ninguna excepción. Sin embargo, jQuery todavía arroja excepciones en append si hace algo del tipo:

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

$(div).appendTo(container);

Lo anterior no es un ejemplo de buenas prácticas utilizando jQuery todavía algunas personas lo hacen por lo que puede encontrar el error. Observe que el código anterior no genera el mismo error que el primer fragmento, sino que lanza el error dentro de jQuery.anexar. Este error todavía se corrige a través de realizar $(toStaticHTML(div)).appendTo(container);

 0
Author: Konstantin Dinev,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-08-20 09:58:08

Pude eliminar el problema encontrando todos los lugares en jQuery que establecían innerHTML y envolviendo el valor que se estaba estableciendo 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'/>";

Se convirtió en:

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 utilice 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 parchear una docena de lugares en jQuery. (no utilice una instrucción var antes del toStaticHTML)

 0
Author: fpintos,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-10-06 09:26:24