Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-8374] iOS: Injecting javascript via webview url crashes iOS devices

GitHub Issuen/a
TypeBug
PriorityMedium
StatusClosed
ResolutionCannot Reproduce
Resolution Date2013-04-17T10:16:33.000+0000
Affected Version/sRelease 1.8.1, Release 2.0.1
Fix Version/sRelease 3.0.2
ComponentsiOS
Labelsparity
ReporterDave Shepheard
AssigneeShameer Jan
Created2012-02-10T07:33:33.000+0000
Updated2017-03-23T21:13:27.000+0000

Description

Problem Description

You can add/inject CSS code in a webview in Android, but in iOS is failing.

Actual Results

Silently fails in iOS

Expected Results

Working the same in iOS and Android

Test Case

app.js:
// create our web view
var win = Ti.UI.createWindow({ backgroundColor: "#fff" });
var web = Ti.UI.createWebView({ url: "http://chicago.craigslist.org/" });

// inject our css when the web view finishes loading (because we need to inject into the head element)
web.addEventListener('load', function () {
    // first, specify the CSS file that we should load
    var cssFileName = 'styles.css';
    // read in the contents
    var cssFromFile = Ti.Filesystem.getFile(cssFileName);
    // clean the contents so we can put them in a JS string
    var contents = String(cssFromFile.read())
        .split('\r').join('')
        .split('\n').join(' ')
        .split('"').join('\\"');
    // and run the JavaScript to inject the CSS by setting the URL of the web view
    // (hint: try running "javascript:alert('Hello, world!');" in your own browser to see what happens
    web.url =
        'javascript:(function evilGenius(){'
            + 'var s=document.createElement("style");'
            + 's.setAttribute("type","text/css");'
            + 's.innerHTML="' + contents + '";'
            + 'document.getElementsByTagName("head")[0].appendChild(s);'
        + '})();';
    // note that we don't use web.evalJS() -- it relies on Ti being injected in the DOM already but we're
    // running this on an external URL, so it won't have Ti injected! web.url is the same method evalJS uses
});

// show the web view
win.add(web);
win.open();
styles.css:
/* WARNING - this WILL turn CraigsList pink! */
body
{
background-color: pink;
}

Comments

  1. Junaid Younus 2012-05-21

    Tested with 2.0.1GA2 on the iOS simulator, issue still exists. Seems to work fine on a Samsung Galaxy S2 (2.3.x).
  2. Shameer Jan 2013-04-17

    Issue does not reproduces Tested with Titanium Studio, build: 3.0.1.201212181159 Titanium SDK version: 3.1.0 Titanium SDK version: 3.0.2 iOS iPhone Simulator: iOS SDK version: 6.0
  3. Shameer Jan 2014-01-24

    css not working for IOS simulator, but app does not crash. Working fine on Android: Titanium SDK version 3.2.0.GA iOS SDK: 7.0.3 iOS iPhone Simulator: 7.0.3 Titanium Studio, build: 3.2.0.201312191547
  4. Wilson Luu 2014-02-04

    Was not able to reproduce the issue i.e. iOS does not crash when injecting javascript via webview url. I did notice this error in the Xcode console:
       [ERROR] Error loading: http://chicago.craigslist.org/, Error: Error Domain=WebKitErrorDomain Code=101 "The operation couldn’t be completed. (WebKitErrorDomain error 101.)"
       
    Tested on: Appcelerator Studio, build: 3.2.1.201401311225 SDK build: 3.2.0.GA, 3.2.1.v20140203174850 CLI: 3.2.1-beta3 Alloy: 1.3.1-cr Xcode: 5.0.2 Devices: iphone 5 (6.1.3), iphone 5s (7.0.2), iphone simulator (6.1), iphone simulator (7.0.3)
  5. Lee Morris 2017-03-23

    Can verify this ticket as "Cannot Reproduce". Tested with the following environment; iPhone 7 and Simulator (10.2) MacOS 10.11.6 (15G31) Studio 4.8.1.201612050850 Ti SDK 6.0.3 GA Appc NPM 4.2.8 Appc CLI 6.1.0 Ti CLI 5.0.11 Alloy 1.9.5 Arrow 1.10.1 Xcode 8.2 (8C38) Node v4.6.0 Java 1.7.0_80

JSON Source