Search code examples
javascriptandroidcsscordovameta

Text field display bug in cordova

Something's wrong with the display of my app when I tried to build it in cordova. Here's the code:

    <html>
    <head>
        <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 *">
        <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">
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
        <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
        <title>Swaggity swag swag</title>
    </head>
    <body>

        <form action="res/link2.html">
            <input type="text" placeholder="Name" name="name">
            <input type="text" placeholder="Text" name="comment">
            <button type="submit">Leggo!</button>
        </form>

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

When I built it, text field displayed ended up displaying like this: https://i.sstatic.net/eCJ0q.jpg

I hope you can help me out on this one, thanks!

Solution

  • I put your code in a fresh cordova application (CLI Version 5.1.1; Visual Studio 2015) and got some security errors in the output console, because you are referencing to http://code.jquery.com. Anyway your provided screenshot looks like, the styles loaded somehow, but giving strange results. In my case I got the folowing errors in the JavaScript Console in Visual Studio:

    Refused to load the stylesheet 'http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css' because it violates the following Content Security Policy directive: "style-src 'self' 'unsafe-inline'".

index.html (15,0)
Refused to load the script 'http://code.jquery.com/jquery-1.11.1.min.js' because it violates the following Content Security Policy directive: "default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'". Note that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.

index.html (0,0)
Refused to load the script 'http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js' because it violates the following Content Security Policy directive: "default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'". Note that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.

index.html (0,0)

    To avoid these errors, I changed the meta tag for Content-Security-Policy and added http://code.jquery.com:

    <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com http://code.jquery.com; style-src 'self' 'unsafe-inline' http://code.jquery.com; media-src *">

    With these changes all looks fine in ripple:

    Code in ripple

    The above solution won't work directly on the platforms iOS, Windows 8.1/10 and Android because of security policies.

    There are two solutions I think:

    1. I would recommend to download the scripts and style sheets and access them localy under the www folder.
    2. Another way is to allow access to external resources. For that you need the whitelist plugin: https://github.com/apache/cordova-plugin-whitelist ... and you have to edit the config.xml under Common->Domain Access->URI and add http://code.jquery.com

    This will produce an XML entry in this file:

    <!-- Allow images, xhrs, etc. to http://code.jquery.com -->
<access origin="http://code.jquery.com" />

    After that all looks fine under Windows 10 for example: Windows 10 screenshot

    Hope that helps!