代码之家  ›  专栏  ›  技术社区  ›  brett m

日历javascript调用不工作

  •  2
  • brett m  · 技术社区  · 7 年前

    编辑

    我尝试了下面的建议,但仍然不起作用。我遇到的错误是:

    “拒绝执行内联脚本,因为它违反了以下内容安全策略指令:“默认src‘self’数据:间隙: https://ssl.gstatic.com “unsafe eval”“。启用内联执行需要“unsafe inline”关键字、哈希('sha256-egiF+Vb0Vz6d/Eu2SO2D+0PSd3mbX/UWP8Bx7aqvuZQ=')或nonce('nonce-…')。另请注意,未显式设置“script src”,因此将“default src”用作回退。”

    有人能解释一下这个意思吗?

    我相信有一个简单的答案,如果有人能告诉我我做错了什么,我将不胜感激。我试图在空白页中调用基本日历。然而,什么都没有发生。我已经核实了我知道要做的一切,但仍然没有任何结果。

    <!DOCTYPE html>
    <html>
        <head>
            <!--
            Customize this policy to fit your own app's needs. For more guidance, see:
                https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
            Some notes:
                * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
                * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
                * Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
                    * Enable inline JS: add 'unsafe-inline' to default-src
            -->
            <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
            <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">
            <link rel="stylesheet" type="text/css" href="css/index.css">
            <title>Hello World</title>
            <link rel="stylesheet" href="fullcalendar/fullcalendar.css" />
            <script src="lib/jquery.min.js"></script>
            <script src="lib/moment.min.js"></script>
            <script src="fullcalendar/fullcalendar.js"></script>
                <script>
            $(document).ready(function() {
    
        // page is now ready, initialize the calendar...
    
        $('#calendar').fullCalendar({
            // put your options and callbacks here
        })
    
    });
        </script>
        </head>
    
        <body>
            <div id="calendar"></div>
    
    
            <script type="text/javascript" src="cordova.js"></script>
            <script type="text/javascript" src="js/index.js"></script>
        </body>
    </html>
    
    2 回复  |  直到 7 年前
        1
  •  0
  •   ADyson    7 年前

    由于内容安全策略禁用了内联脚本(即实际上是页面的一部分,而不是从链接的.js文件加载的脚本),所以没有发生任何事情。这就是错误消息告诉您的内容。

    假设您想允许它们(尽管XSS攻击的潜在理论风险),那么启用的线索就在代码中它上面的注释中:

    禁止使用内联脚本以降低XSS漏洞的风险。要更改此设置,请执行以下操作:

    • 启用内联JS:将“不安全内联”添加到默认src

    所以只需修改 default-src 标记的节,以包括该指令。更改为:

    default-src 'self' 
    

    default-src 'self' 'unsafe-inline'
    

    如果您不愿意这样做,那么另一种选择是将Javascript从页面移动到单独的页面。js文件,然后使用 <script src=... 标签类型。

    请注意,这些都与fullCalendar没有任何直接关系,完全是关于安全策略的,它控制页面允许使用的脚本和资源。看见 https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP 有关此主题的介绍。

        2
  •  0
  •   Vikasdeep Singh    7 年前

    您的代码不工作可能有多种原因。由于信息不足,无法查看详细信息。以下是 Full Calendar . 请按此操作:

    $(document).ready(function() {
    
      // page is now ready, initialize the calendar..
      $('#calendar').fullCalendar({
        weekends: false,
        dayClick: function() {
          alert('a day has been clicked!');
        },
        defaultView: 'agendaWeek'
    
      });
    
    });
    <link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.2/fullcalendar.min.css" rel="stylesheet"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.2/fullcalendar.min.js"></script>
    
    
    <div id='calendar'></div>