webentwicklung-frage-antwort-db.com.de

Die Verwendung von jQuery mit Windows 8 Metro JavaScript App führt zu Sicherheitsfehlern

Da es sich anhörte, als wäre jQuery eine Option für Metro JavaScript-Apps , freute ich mich auf Windows 8-Entwickler. Ich habe Visual Studio 2012 Express RC installiert und ein neues Projekt gestartet (sowohl leere als auch Rastervorlagen haben das gleiche Problem).

Ich habe eine lokale Kopie von jQuery 1.7.2 erstellt und als Skriptreferenz hinzugefügt.

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

Unglücklicherweise wirft es einen Konsolenfehler aus, sobald ich die resultierende App ausgeführt habe:

HTML1701: Dynamischer Inhalt kann nicht hinzugefügt werden 'a' Ein Skript hat versucht, dynamischen Inhalt oder zuvor dynamisch geänderte Elemente einzufügen, die möglicherweise unsicher sind. Wenn Sie beispielsweise die innerHTML-Eigenschaft zum Hinzufügen von Skript oder fehlerhaftem HTML verwenden, wird diese Ausnahme generiert. Verwenden Sie die toStaticHTML-Methode, um dynamischen Inhalt zu filtern, oder erstellen Sie explizit Elemente und Attribute mit einer Methode wie createElement. Weitere Informationen finden Sie unter http://go.Microsoft.com/fwlink/?LinkID=247104 .

Ich habe in einer nicht minimierten Version von jQuery einen Haltepunkt verletzt und die beleidigende Zeile gefunden:

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

Offensichtlich verbietet das Sicherheitsmodell für Metro-Apps das Erstellen von Elementen auf diese Weise . Dieser Fehler verursacht keine unmittelbaren Probleme für den Benutzer, aber ich befürchte, dass er aufgrund seiner Position dazu führen wird, dass Funktionstests in jQuery fehlschlagen, was nicht der Fall sein sollte.

Ich möchte definitiv jQuery $.Deferred, um so ziemlich alles einfacher zu machen. Ich würde es vorziehen, in der Lage zu sein, die Auswahlmaschine und die Ereignisbehandlungssysteme zu verwenden, aber ich würde ohne sie leben, wenn ich müsste.

Wie bringt man die neueste jQuery dazu, gut mit der Metro-Entwicklung zusammenzuarbeiten?

44
patridge

Sie müssen die jQuery-Quelle so bearbeiten, dass Sie die jQuery.support-Funktion an MSApp.execUnsafeLocalFunction übergeben, wodurch die unsichere Inhaltsprüfung wie folgt deaktiviert wird:

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

Sie müssen daran denken, das letzte Paar Klammern zu entfernen - Sie benötigen keine selbstausführende Funktion, da execUnsafeLocalFunction automatisch die übergebene Funktion ausführt.

Ich schlage vor, die Verwendung der WinJS-Features ist ein besserer Ansatz - dazu gehört das WinJS.Promise-Objekt als Alternative zu verzögerten Operationen (die selbst eine Implementierung des Promise-Musters sind). Mit dem Namespace WinJS.Utilities können Sie einige grundlegende DOM-Manipulationen vornehmen.

Sie sollten zweimal überlegen, wie Sie jQuery für verzögerte Vorgänge verwenden. Das WinJS.Promise-Objekt wird in den gesamten Metro-APIs verwendet, um asynchrone Aktivitäten darzustellen, und am Ende werden zwei ähnliche Ansätze verwendet.

33
Adam Freeman

Hier ist deine Antwort

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

Seine offizielle Jquery-Bibliothek für Windows 8

8
Nikhil Ranjan

Ich habe den Großteil des jQuery-Kerns so portiert, dass er die native WinJS-Bibliothek umschließt. Es ist leicht und bietet so ziemlich alles, was jQuery durch Hinzufügen einiger Plugins für Ausweise, Benachrichtigungen usw. tut.

Es ist eine Arbeit in Arbeit, aber ich versuche, einige Leute dazu zu bringen, am Spaß teilzunehmen.

https://github.com/rmcvey/winjq

Schnelles Schreiben (Dokumentation wird hinzugefügt): http://practicaljs.com/jquery-in-windows-8-apps/

7
Rob M.

Nach der letzten // Build/2012 - Konferenz und dieser Vortrag spricht die Verwendung von jQuery in Windows 8 Store Apps. Sie sprechen insbesondere über die exakte Ausnahme von script injection in innerHTML und sprechen über die darin vorgenommenen Aktualisierungen.

Das Unternehmen AppendTo hat während dieses Gesprächs auch jQuery für Windows 8 offiziell vorgestellt. Es sieht ordentlich aus der Demonstration aus, die im Vortrag im Link darüber gegeben wurde.

Sie sagen auch, dass es keine gute Idee ist, jQuery von CDN für Windows 8-Apps im lokalen Kontext zu erhalten.

7
Sagar Sane

Das JavaScript Dynamic Content-Shim auf GitHub wurde von Microsoft Open Technologies erstellt und veröffentlicht, um diesen Fehler zu beheben. Es wurde nicht mit jQuery getestet, löst aber höchstwahrscheinlich Ihr Problem. Verweisen Sie auf die Datei winstore-jscompat.js am Anfang Ihrer App, bevor andere Skripts ausgeführt werden und dieser Fehler nicht mehr angezeigt wird. 

6
buildwinjs

Ich habe ein wenig mehr Nachforschungen angestellt und wollte ein paar Dinge klären.

Der Fehler, den Sie sehen, befindet sich in der JavaScript-Konsole, keine tatsächliche Ausnahme. Der jQuery-Code läuft weiter nur gut . Es ist eigentlich etwas, das das zugrunde liegende System protokolliert, kein Fehler oder eine Ausnahme.

Es gibt keinen Grund, jQuery zu patchen oder irgendetwas anderes zu tun - es ist eine laute Systemkomponente, kein tatsächlicher Fehler.

2
Chris Tavares

Ich habe hier eine ziemlich ausführliche Erklärung geschrieben, wie man jQuery für Windows 8 zum Laufen bringt http://davidvoyles.wordpress.com/2013/09/23/hacking-jquery-to-work-in-windows-8) /

1

Ich glaube, dass dies die gleiche Einschränkung ist, die von Content Security Policy (CSP) auferlegt wird. Dieser spezielle Fall wurde in jQuery 1.8.0 behandelt. Tritt das Problem dort immer noch auf?

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

0
Dave Methvin

jQuery selbst hat solche Ausnahmen in der neuesten Version nicht für mich ausgelöst, solange ich den gesamten Code des Formulars, z.

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

mit

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

Beachten Sie, dass nicht alle HTML-Zeichenfolgen als unsicher angesehen werden, z.

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

Löst keine Ausnahmen aus. JQuery wirft jedoch beim Anhängen immer noch Ausnahmen aus, wenn Sie etwas in dieser Art tun:

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

$(div).appendTo(container);

Bei dem oben genannten Beispiel handelt es sich nicht um ein Beispiel für bewährte Methoden, bei denen jQuery verwendet wird. Einige Benutzer machen es jedoch, sodass der Fehler auftreten kann. Beachten Sie, dass der obige Code nicht den gleichen Fehler wie der allererste Ausschnitt generiert, sondern den Fehler in jQuery.append auslöst. Dieser Fehler wird weiterhin durch Ausführen von $(toStaticHTML(div)).appendTo(container); behoben.

0

Wenn Sie es noch benötigen, schreibe ich eine Neuimplementierung des in jQuery gefundenen Objekts "Deferred".

Wenn Sie fertig sind, sollte es zu 100% mit dem Objekt "Deferred" von jQuery kompatibel sein. Im Moment ist es ziemlich komplett, muss aber getestet werden.

Siehe this .

Hoffe das wird helfen!

Ich denke, es sollte eine gute Idee sein, zu lernen, wie man die Implementierung von Microsoft von Promise anstelle von jQuery verwendet, wenn mit Windows 8-Apps gearbeitet wird.

0
Nicolas Ramz

Ich konnte das Problem beheben, indem ich alle Stellen in jQuery fand, die innerHTML festlegen, und den mit toStaticHTML() gesetzten Wert umbrechen.

Also zum Beispiel:

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

wurden:

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

Um sicher zu sein, habe ich dies auch kurz vor der Definition von jQuery definiert, falls die Datei in einem normalen Browser verwendet wird:

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

Für mich schien das die sicherste Änderung zu sein, obwohl es ein Dutzend Stellen in jQuery . Erforderlich machte.

0
fpintos