Cordova - 拒绝执行内联事件处理程序,因为它违反了以下内容安全策略 [英] Cordova - refuse to execute inline event handler because it violates the following content Security policy

查看:66
本文介绍了Cordova - 拒绝执行内联事件处理程序,因为它违反了以下内容安全策略的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在接受 Cordova 应用程序开发培训,我解决了内容安全策略的问题.

我的应用程序正在使用 Android 模拟器运行,但是当我必须执行 javascript 时,我在 NetBeans(输出窗口)中收到一条消息.

拒绝执行内联事件处理程序,因为它违反了以下内容安全策略指令:script-src 'self' https://ssl.gstatic.com".(22:35:56:126 | 错误,安全)在 www/index.html:58

我的代码如下.这是我的 index.html.我尝试了解 CSP 的工作原理,并且我认为我了解这个概念,但在这种情况下,我不了解问题所在.第 58 行是注释.

<头><meta http-equiv="Content-Security-Policy" content="default-src 'self' * data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self';script-src 'self' https://ssl.gstatic.com; media-src *"><meta name="format-detection" content="telephone=no"><meta name="msapplication-tap-highlight" content="no"><meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width"><title>Hello World</title><link rel="stylesheet" type="text/css" href="css/index.css"><身体><div class="app"><h1>阿帕奇科尔多瓦</h1><div id="deviceready" class="blink"><p class="事件监听">连接到设备</p><p class="event received">设备准备就绪</p>

<!--第 58 行--><button onclick="capturePhoto();">捕捉照片</button><br><img style="display:none;width:80px;height:80px;"id="smallImage" src=""/><img style="display:none;"id="largeImage" src=""/><script type="text/javascript" src="cordova.js"></script><script type="text/javascript" src="js/index.js"></script>

预先感谢您的帮助,因为我需要它.杰罗姆

解决方案

检查这个 link,它说:

<块引用>

内联 JavaScript 不会被执行.此限制禁止内联

为了使用新的浏览器,您需要在编写代码时明确区分内容和行为.

<button>点击精彩!</button><script src="popup.js"></script><!-- popup.js -->document.addEventListener('DOMContentLoaded', function () {document.querySelector('button').addEventListener('click', clickHandler);主要的();});函数 clickHandler(元素){//点击代码}函数主(){//初始化工作在这里进行.}<!-- popup.js -->

I'm training for Cordova application development and I turn around a problem with Content Security Policy.

My application is running with the Android emulator, but when I have to execute a javascript I get a message in NetBeans (output window).

Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' https://ssl.gstatic.com". (22:35:56:126 | error, security)
  at www/index.html:58

My code is below. This is my index.html. I try to understand how CSP works and I think I understand the concept, but in this case, I don't understand the problem. Line 58 is the comment.

<html>        
    <head>   

        <meta http-equiv="Content-Security-Policy" content="default-src 'self' * data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self'; script-src 'self' https://ssl.gstatic.com; media-src *">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

        <title>Hello World</title>

        <link rel="stylesheet" type="text/css" href="css/index.css">

    </head>

    <body>
        <div class="app">
            <h1>Apache Cordova</h1>
            <div id="deviceready" class="blink">
                <p class="event listening">Connecting to Device</p>
                <p class="event received">Device is Ready</p>
            </div>
        </div>

        <!--
        line 58
        -->
        <button onclick="capturePhoto();">Capture Photo</button> <br>

        <img style="display:none;width:80px;height:80px;" id="smallImage" src="" />
        <img style="display:none;" id="largeImage" src="" />

        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </body>        
  </html>

By advance thanks for your help because I need it. Jérôme

解决方案

Check this link, it says:

Inline JavaScript will not be executed. This restriction bans both inline <script> blocks and inline event handlers (e.g. button onclick="...").

To avoid cross-site scripting issues like below specified

one.app#/home:1 Refused to execute inline event handler because it violates the following Content
Security Policy directive: "script-src 'self' 'nonce-d452460d-e219-a6e5-5709-c8af6ca82889'
chrome-extension: 'unsafe-inline' 'unsafe-eval' https://sfdc.azureedge.net 
*.na34.visual.force.com https://ssl.gstatic.com/accessibility/". Note that 'unsafe-inline'
is ignored if either a hash or nonce value is present in the source list.

Go for event listener functions instead of onclick='myFun()".

<body onload="main();">
    <button onclick="clickHandler(this)">
        Click for awesomeness!
    </button>
</body>
<script>
    function clickHandler(element) {
        // On click Code
    }

    function main() {
        // Initialization work goes here.
    }
</script>

In order to to work with new Browser you need to write your code with a clean separation between content and behavior.

<body>
  <button>Click for awesomeness!</button>
</body>
<script src="popup.js"></script>

<!-- popup.js -->
    document.addEventListener('DOMContentLoaded', function () {
      document.querySelector('button').addEventListener('click', clickHandler);
      main();
    });

    function clickHandler(element) {
        // On click Code
    }

    function main() {
        // Initialization work goes here.
    }
<!-- popup.js -->

这篇关于Cordova - 拒绝执行内联事件处理程序,因为它违反了以下内容安全策略的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
移动开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆