1

I am developing a test page, which will used only by myself and only with Google Chrome. Is there any way to perform cross domain requests to 3rd party server (which doesn't allow such requests) with such conditions? The requests could be GET or OPTIONS.

(I am aware about Chrome extensions like Advanced REST client, which could perform such requests, but it doesn't help me since complex calculations should be performed prior to request execution)

LA_
  • 18,018
  • 53
  • 160
  • 288
  • I've not used it before, but can you not make an ajax request and use something like ``beforeSend`? – SpYk3HH Sep 05 '14 at 12:59
  • @SpYk3HH, don't think I understand you - how `beforeSend` could help here? – LA_ Sep 05 '14 at 13:01
  • you said `doesn't help me since complex calculations should be performed prior to request execution` I figured your issue was in how to preform those request before making the request. in which case, just use `beforeSend` with Losbear's answer below – SpYk3HH Sep 05 '14 at 13:04
  • @SpYk3HH, I know how to perform calculations prior to the request. The question is how to perform cross domain request. – LA_ Sep 05 '14 at 13:11
  • ah ok, was just trying to help. from what i've researched on this, looks like Losbear's answer is dead on – SpYk3HH Sep 05 '14 at 13:12

3 Answers3

1

One way is to serve your files off a webserver rather than the local file system. Another way is to start Chrome with a flag:

chrome --disable-web-security

(From Cross-origin image load denied on a local image with THREE.js on Chrome)

A more extensive list of flags is here: http://peter.sh/experiments/chromium-command-line-switches/

Community
  • 1
  • 1
Leeft
  • 3,687
  • 1
  • 12
  • 22
  • Thanks. I read about this flag before, but really don't want to disable web security for all tabs/pages. – LA_ Sep 05 '14 at 13:18
1

I'm working on a project similar to this and I had to upload a simple html file to one of my prod servers for testing so I could test the cross domain functionality. The html file pointed to localhost, so it would only work for me while in development.

The jquery code looked like this (just in case it helps):

        $.ajax({
            type: "POST",
            dataType: "json",
            cache: false,
            url: url,
            data: data,
            crossDomain: true,
            success: function (data) {
                ATSJBAjax = null;
                if (callback != null) callback(data);
            }
        });

Also I'm using c#/MVC, and I had to add an attribute to all controller methods that added "Access-Control-Allow-Origin" to the response header so Chrome would be OK with it. I called the attribute "AllowCrossDomainAccess", which ref'd the class below:

public class AllowCrossDomainAccessAttribute : ActionFilterAttribute
{
    public override void OnActionExecuting(ActionExecutingContext filterContext)
    {
        filterContext.RequestContext.HttpContext.Response.AddHeader("Access-Control-Allow-Origin", "*");
        base.OnActionExecuting(filterContext);
    }
}
Losbear
  • 2,939
  • 29
  • 28
  • Thanks, but this is something different to what I have - I should communicate with 3rd party server, so I can not add header `Access-Control-Allow-Origin`. – LA_ Sep 05 '14 at 13:17
1

One option is to disable the same-origin policy entirely, as detailed in Disable same origin policy in Chrome. This will probably do the trick for you, but it's a bit inelegant, as it turns off the same-origin policy for the entire browser instance.

A second option is to create a small Chrome extension that holds all of the files that you need to load. It will make your files accessible via chrome-extension://... and only files within that extension will be immune from the same-origin policy.

Create a new folder, put your testing Web page in it, and create a manifest.json file in the same folder:

/testing_extension
    test_page_immune_from_same_origin.html
    script_used_by_test_page.js
    styles_for_test_page.css
    manifest.json

The contents of manifest.json should be

{
  "name": "All-origin access extension",
  "manifest_version": 2,
  "version": "1.0",
  "permissions": ["<all_urls>"]
}

Load the extension by going to chrome://extensions, enabling Developer Mode, and selecting the new folder with Load unpacked extension... option.

You can view your page as an extension resource chrome-extension://[app_id]/[file_name], where "app_id" is the hash listed for the extension on the chrome://extensions page. (It will be a long string of lowercase letters.) Now when the page performs cross-origin resources, it does so with the authority of a browser extension, unrestricted by the same-origin policy.

Note that you will need to move any inline scripts into separate files in order to comply with extension CSP requirements.

Community
  • 1
  • 1
apsillers
  • 101,930
  • 15
  • 206
  • 224
  • Thanks! Will I be able to modify my page (` test_page_immune_from_same_origin.html`) online with such approach? I.e. If I need to change something there, will I have to delete/add extension again? Or, will I need just to refresh the page? – LA_ Sep 05 '14 at 13:16
  • I think you can simply refresh the extension page anytime you change the file; no need to reload the extension unless you change the manifest. If your file is hosted on a web server, you'll need to download it to your local file system, and re-download if you need to pull any changes from the web server's version. – apsillers Sep 05 '14 at 13:23
  • Thanks, it works! (I had to change the page a little - to be in line with content security policy - https://developer.chrome.com/extensions/contentSecurityPolicy) – LA_ Sep 05 '14 at 13:37
  • @LA_ Right, of course; I've added a note about CSP requirements to my answer. – apsillers Sep 05 '14 at 14:48