web-dev-qa-db-fra.com

Chrome montrant l'erreur comme: Refusé d'exécuter le script en ligne en raison de Content-Security-Policy

Je travaille à la création d'une extension Chrome d'un widget de recadrage d'image. Le code de mon popup.html est comme suit:

    <body>
            <textarea id="widget_script" style="border:1px solid #ccc;padding:5px;width:600px" rows="5" readonly></textarea>
            <script type="text/javascript">
                var protocol=window.location.protocol;
                var Host= window.location.Host;
                var head=('<div id="wd_id" style="margin-bottom: 20px;"></div>
                <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></\script>
                <script type="text/javascript" src="'+protocol+'//'+Host+'Image_crop/cropimages/img_crop_widget.js'+'"><\/script>
                <script type="text/javascript">init_widget()<\/script>');
                document.getElementById("widget_script").innerHTML=head;
            </script>
    </body>

Les variables protocol et Host take protocol and Host à partir de l'URL dans le navigateur. Lorsque j'ai essayé d'intégrer cela en tant qu'extension Chrome, cela ne fonctionne pas. Lorsqu'il fonctionne parfaitement, il affiche le code suivant dans la zone de texte:

<div id="wd_id" style="margin-bottom: 20px;"></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://localhost/cropimages/img_crop_widget.js"></script>
<script type="text/javascript">init_widget()</script>

J'ai des choses peu comme, placer le code JS dans un fichier JS externe et aussi appeler le fichier dans manifest.json l'appeler dans mon popup.html, mais aucun n'a fonctionné.

Quelqu'un peut-il me dire ce que je fais mal ou quoi d'autre devrais-je essayer de faire pour que cela fonctionne?

Merci d'avance...

jquerygoogle-chromegoogle-chrome-extension
37
V15HM4Y

À partir de la documentation CSP de l'extension Chrome :

Le JavaScript en ligne ne sera pas exécuté. Cette restriction interdit les deux en ligne <script> blocs et gestionnaires d'événements en ligne (par exemple <button onclick="...">).

Vous ne pouvez pas avoir des scripts en ligne dans votre extension HTML comme:

<script>alert("I'm an inline script!");</script>

<button onclick="alert('I am an inline script, too!')">

Vous devez plutôt placer votre script dans un fichier distinct:

<script src="somescript.js"></script>
73
apsillers

Vous devez ajouter content_security_policy à ton manifest.json fichier:

"content_security_policy": "script-src 'self' 'sha256-B+Qe/KNUDtGDd/m1g5ycAq1DgpLs9ubKmYTlOHBogC8='; object-src 'self'"

Vous trouverez le hachage à partir de la console.

enter image description here

4
emon