À l'aide de jQuery avec Windows 8 Metro Application JavaScript causes d'erreur de sécurité
Car il sonnait comme jQuery est une option pour le Métro les applications JavaScript, j'étais en train de regarder en avant pour Windows 8 dev. J'ai installé Visual Studio 2012 Express RC et a commencé un nouveau projet (à la fois vide et de la grille de modèles ont le même problème).
J'ai fait une copie locale de jQuery 1.7.2 et de l'ajouter en tant que référence 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>
Malheureusement, dès que j'ai couru l'application en elle lance une console d'erreur:
HTML1701: Impossible d'ajouter du contenu dynamique 'a' Un script a tenté d'injecter du contenu dynamique, ou
les éléments précédemment modifié dynamiquement, qui peuvent être dangereuses. Pour
exemple, à l'aide de la propriété innerHTML pour ajouter un script ou code HTML mal formé
va générer cette exception. L'utilisation de la méthode toStaticHTML à filtre
contenu dynamique, ou créer explicitement des éléments et des attributs avec une
méthode createElement. Pour plus d'informations, voir
http://go.microsoft.com/fwlink/?LinkID=247104.
J'ai giflé un point d'arrêt dans un non-compacte de la version de jQuery et trouvé la ligne incriminée:
div.innerHTML = " <link/><table></table><a href='/a' style='top:1px;float:left;opacity:.55;'>a</a><input type='checkbox'/>";
Apparemment, le modèle de sécurité pour les applications Metro interdit de créer des éléments de cette façon. Cette erreur ne cause pas de problèmes immédiats pour l'utilisateur, mais compte tenu de son emplacement, je suis inquiet, il sera la cause de la capacité de découverte tests en jQuery à l'échec qui ne le sont pas.
J'ai vraiment envie de jQuery $.Deferred
pour faire à peu près tout plus facile. Je préfère être en mesure d'utiliser le sélecteur de moteur et de gestion des événements, des systèmes, mais je pourrais vivre sans eux, si je devais le faire.
Comment obtenir la plus récente de jQuery pour jouer gentiment avec le Métro de développement?
- Êtes-vous le chargement de jquery via un cdn?
- Pas de. C'est une erreur déclenchée dans le local jQuery code de l'exécution.
- Sur une note de côté, on dirait que je puisse apprendre nouvelle promesse du système au lieu de jQuery
$.Deferred
. - jQuery 1.8 nécessite deux plus de modifications dans le but de travailler ensemble avec Windows 8 sans problème. J'ai écrit un Blog qui couvre les modifications nécessaires, donne quelques informations de base et fournit un "corrigé" de la version de jQuery 1.8.
- Voici une bonne ressource pour l'utilisation de jQuery sur Windows 8: incloud.de/2012/08/windows-8-using-jquery-for-app-development
- Utilisation suivantes pour résoudre ce problème: github.com/Microsoft/winstore-jscompat
Vous devez vous connecter pour publier un commentaire.
Vous devez modifier le jQuery source de sorte que vous passer le
jQuery.support
fonction deMSApp.execUnsafeLocalFunction
, ce qui désactive l'insécurité la vérification du contenu, comme ceci:Vous avez besoin de se rappeler de retirer la dernière paire de parenthèses - vous n'avez pas besoin d'une auto-exécution de la fonction, car
execUnsafeLocalFunction
exécute automatiquement la fonction qu'il est passé.Je suggère qu'une meilleure approche est d'utiliser WinJS caractéristiques - ce qui inclut les
WinJS.Promise
objet comme une alternative à un report des opérations (qui sont eux-mêmes une mise en œuvre de la Promesse de motif). Et vous pouvez faire un peu de base de manipulation du DOM à l'aide de laWinJS.Utilities
espace de noms.Vous devriez réfléchir à deux fois sur l'utilisation de jQuery pour reportés opérations. Le
WinJS.Promise
objet est utilisé tout au long de la Métro Api pour représenter async activités et vous allez vous retrouver à l'aide de deux similaires, mais différentes approches.Voici votre réponse
https://github.com/appendto/jquery-win8
Officielle à la bibliothèque jquery pour windows 8
Pour ce que ça vaut, j'ai porté la majorité de jQuery de base pour envelopper le natif de WinJS de la bibliothèque. Il est léger et offre à peu près tout ce que fait jQuery avec l'ajout de quelques plugins pour les badges, les notifications, etc.
C'est un travail en cours, mais je vais essayer d'obtenir certaines personnes à se joindre à la fête.
https://github.com/rmcvey/winjq
Rapide écriture-up (la documentation est ajoutée à l'): http://practicaljs.com/jquery-in-windows-8-apps/
Après la récente //Construire/2012 conférence et ce discours parle de l'utilisation de jQuery dans Windows 8 Store. Plus précisément, ils parlent de l'exception exacte de injection de script à l'intérieur de innerHTML, et de parler des mises à jour effectuées dans cette.
La société AppendTo a également dévoilé officiellement jQuery pour Windows 8 pendant que parler. Il a l'air soigné de la démonstration donnée dans la conversation que dans le lien sur.
Ils disent aussi que ce n'est pas une bonne idée pour obtenir de jQuery à partir de CDN pour les Applications Windows 8 dans le Contexte Local!
La JavaScript Contenu Dynamique cale sur GitHub a été créé et publié par Microsoft Open Technologies afin de corriger cette erreur. Il n'a pas été testé avec jQuery mais sera plus susceptible de résoudre votre problème. Référence de l'winstore-jscompat.js fichier dans le début de votre application avant tous les autres scripts sont exécutés et vous ne verrez plus cette erreur.
J'ai fait un peu plus d'enquête, et je voulais préciser une ou deux choses.
L'erreur que vous voyez est dans la console JavaScript, n'est pas une véritable exception. Le jQuery, le code continue de s'exécuter l'amende juste. C'est en fait quelque chose que le système sous-jacent est de journalisation, pas une erreur ou une exception.
Il n'y a pas de raison de patch jQuery ou faire autre chose - c'est un système bruyant composant, pas une erreur réelle.
J'ai écrit une jolie explication détaillée sur la façon d'obtenir jQuery pour fonctionner avec Windows 8 ici
http://davidvoyles.wordpress.com/2013/09/23/hacking-jquery-to-work-in-windows-8/
Si vous avez encore besoin d'elle, j'ai écris une remise à plat de report de l'objet trouvé dans jQuery.
Une fois terminé, il devrait être 100% compatible avec jQuery Différée de l'objet. Maintenant, c'est assez complet, mais a besoin de quelques essais.
Voir cette.
Espère que cela va vous aider!
Cela dit, je pense que ça devrait être une bonne idée d'apprendre à utiliser Microsoft de la mise en œuvre de la Promesse au lieu de jQuery lorsque vous travaillez sur des applications Windows 8.
Je crois que c'est la même restriction imposée par le Contenu Politique de Sécurité (CSP). Ce cas particulier a été abordée dans jQuery 1.8.0. Le problème est-il encore s'y produisent?
https://github.com/jquery/jquery/commit/dc83072878ed9636c8158a014bd9fa4acc1ccce3
jQuery lui-même ne jetez pas ces exceptions pour moi dans la dernière version, tant que j'ai remplacé tous les code de la forme par exemple:
avec
Noter que pas toutes les chaînes HTML sont considérés comme dangereux par exemple:
Ne pas jeter des exceptions. Cependant jQuery envoie toujours des exceptions à ajouter si vous faites quelque chose de la sorte:
Ci-dessus n'est pas un exemple de bonnes pratiques à l'aide de jQuery a encore des gens qui le font si vous pouvez rencontrer l'erreur. Notez le code ci-dessus ne génère pas la même erreur que le premier extrait, mais au lieu de cela génère l'erreur à l'intérieur de jQuery.append. Cette erreur est encore fixé par l'exécution
$(toStaticHTML(div)).appendTo(container);
J'ai été en mesure d'éliminer le problème en trouvant tous les lieux de jQuery que l'ensemble innerHTML et de l'emballage de la valeur définie avec
toStaticHTML()
.Ainsi, par exemple:
est devenu:
Pour être sûr, j'ai également défini ce juste avant de jQuery est défini, dans le cas où le fichier est utilisée dans un navigateur:
Pour moi, cela semblait être la plus sûre de changement, bien que l'application des correctifs requis une douzaine de places en jQuery.
(ne pas utiliser une instruction var avant le toStaticHTML)
toStaticHTML
peut changer radicalement votre chaîne. Par exemple, dans le premier exemple, si vous avez commencé avec un<link/>
balise, après le passage par latoStaticHTML
, vous n'aurez pas plus de question. D'autres choses qui sont supprimés incluent HTML5 attributs data -.