CODEWITHSUNDEEP
cordovajquery-mobilevisual-studio-2015visual-studio-cordova
Mark
Mark

Reputation: 25

Using Jquery Mobile create Cordova APP, there is an error when debug on Android Device

I download the jquery Mobile 1.4.5, and use it in Visual Studio 2015 to create a Cordova APP. When I want to debug, it can run on Android device, but here is an error:

Refused to load the image 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==' because it violates the following Content Security Policy directive: "default-src *".

Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.

jquery.mobile-1.4.5.min.js (3,20607)

I don't know why there is a question in jquery mobile javascript. Can someone help me? Thanks.

Update: index.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval';">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes" />
    <title>jQuery Mobile</title>
    <link href="css/index.css" rel="stylesheet" />
    <link href="css/jquery.mobile-1.4.5.min.css" rel="stylesheet" type="text/css" />
    <script src="scripts/jquery-1.8.0.min.js" type="text/javascript"></script>
    <script src="scripts/jquery.mobile-1.4.5.min.js" type="text/javascript"></script>
</head>
<body>
    <script src="cordova.js"></script>
    <script src="scripts/platformOverrides.js"></script>
    <script src="scripts/index.js"></script>

    <div data-role="page" id="page">
        <div data-role="header">
            <h1>PageTransition</h1>
        </div>
        <div role="main" class="ui-content">
            <p><a href="#page2" data-transition="fade">Fade</a></p>
            <p><a href="#page2" data-transition="flip">Flip</a></p>
            <p><a href="#page2" data-transition="flow">Flow</a></p>
            <p><a href="#page2" data-transition="pop">Pop</a></p>
            <p><a href="#page2" data-transition="slide">Slide</a></p>
            <p><a href="#page2" data-transition="slidedown">Slidedown</a></p>
            <p><a href="#page2" data-transition="slidefade">Slidefade</a></p>
            <p><a href="#page2" data-transition="slideup">Slideup</a></p>
            <p><a href="#page2" data-transition="turn">Turn</a></p>
            <p><a href="#page2" data-transition="none">None</a></p>
        </div>
        <div data-role="footer">
            <h4>PageTransition</h4>
        </div>
    </div>
    <div data-role="page" id="page2">
        <div data-role="header" data-add-back-btn="true">
            <h1>PageTransition</h1>
        </div>
        <div role="main" class="ui-content"> Back </div>
        <div data-role="footer">
            <h4>PageTransition</h4>
        </div>
    </div>
</body>
</html>

index.js

(function () {
    "use strict";

    document.addEventListener( 'deviceready', onDeviceReady.bind( this ), false );

    function onDeviceReady() {

    };

} )();

Upvotes: 0

Views: 392

Answers (1)

Elvis Xia - MSFT
Elvis Xia - MSFT

Reputation: 10831

From the <meta http-equiv="Content-Security-Policy" ... /> in your html codes. You are not allowing data: scheme for your Content Security Policy.

To fix the problem, you can add the data: right after default-src * like below:

<meta http-equiv="Content-Security-Policy" content="default-src * data: ; ...>

For details about using Content Security Policy, please refer to Content Security Policy Reference.

Upvotes: 1

Related Questions