Unable to load div with external Url - javascript

I am using asp.net MVC 5 application. In that, I am using the jquery to load the div with the external url.
Html
<div id="DivOne" class="oddNum">Div One</div>
<button id="btnOne">Load Content</button>
Jquery
$('#btnOne').click(function() {
// Action goes here
$('#DivOne').load('http://www.artisteer.com');
});
I am getting the following error message (in browser console) when in button click event.
Failed to load http://www.artisteer.com/: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://fiddle.jshell.net' is therefore not allowed access.
Here is the JsFiddle Url:
http://jsfiddle.net/Q8KVC/7533/
Note: I dont want to use iframe
PS: Okay, I think I am left with only option is to use iframes. Do we get the same issue with the iframes as well?

Use an https endpoint for your external URL, otherwise, you will end up with a mixed content error on console
you can see visit link for more understanding
mixed-content-the-page-was-loaded-over-https-but-requested-an-insecure-xmlhttprequest-endpoint
HTTPS is important to protect both your site and your users from
attack.
Mixed content degrades the security and user experience of your HTTPS
site.

For chrome if add Access-Control-Allow-Origin plugin it will solve the issue. It will work for chrome browser only

Related

Set iframe Protection in Apache

I am using the following
Header set Content-Security-Policy: "frame-ancestors http://bmx-tv.net https://bmx-tv.net http://site.bmx-tv.top https://site.bmx-tv.top http://ps1.bmx-tv.top https://ps1.bmx-tv.top;"
on a blank .HTaccess page to try to prevent all sites besides those listed from being allowed to iframe my website but when i save the .htaccess it breaks my website with
Internal Server Error The server encountered an internal error or misconfiguration and was unable to complete your request. Please contact the server administrator at webmaster#localhost to inform them of the time this error occurred, and the actions you performed just before this error. More information about this error may be available in the server error log
Any idea what im doing wrong? or how to only allow certain urls to iframe me? i need this fixed there stealing my content but i cant lock it down to only parent because i have other urls i want to iframe my own content on.
Where do you get the : from? The apache docs show no : and has the following example:
Header set MyHeader "%D %t"
Therefore it should be:
Header set Content-Security-Policy "frame-ancestors http://bmx-tv.net https://bmx-tv.net http://site.bmx-tv.top https://site.bmx-tv.top http://ps1.bmx-tv.top https://ps1.bmx-tv.top;"
There is even a website which shows you how to enable and configure the Content-Security-Policy Header for a lot of systems. Also Apache.

AJAX result does not show up using HTTPS

My website is www.yourentacar.co.uk
when I navigate to the website using http 
http://www.yourentacar.co.uk 
write any letters in the search box 
AJAX returns results.
The problem occurs when I navigate to the website using https
https://www.yourentacar.co.uk
write any letters in the search box
the page is frozen and I do not get any result.
I have been trying to solve this problem for several days but I can't find a solution.
Such a problem is normally due to CORS issue, where a page on HTTP is not allowed to make a request to HTTPS unless allowed specifically via 'Access-Control-Allow-Origin' header.
If you open console, you might see an error like this
XMLHttpRequest cannot load [your api including protocol]. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin [your domain including protocol] is therefore not allowed access.
You can fix this a few ways.
Make your site always run on https
Set Access-Control-Allow-Origin on your ajax call to allow non ssl domain to visit it, in your case.. something like header Access-Control-Allow-Origin: http://www.yourentacar.co.uk

Allowing cross-site requests between subdomains without changing file contents of second sub domain

I am currently attempting to wrap a web application (ConnectWise) for inclusion within my company's central intranet site. It's a fairly simple process for the most part; create a containing page, with an iframe, point the iframe at the ConnectWise url. This part works for almost all of the functionality.
The problem comes during certain select features of the app (in this case, part of the process of creating a timesheet entry), which simply fail to work. Chrome gives the following console output.
Uncaught SecurityError: Failed to read the 'frame' property from 'Window': Blocked a frame with origin "https://app.example.com" from accessing a frame with origin "https://host.example.com". Protocols, domains, and ports must match.
I am aware this is caused by the security options for cross-site and same-origin policies. Given the following points, is there a way to overcome this?
I have full control over https://host.example.com
I can change html, javascript, and file contents
I can change IIS settings and headers
I have partial control over https://app.example.com
I can not change html, javascript, and file contents
I can change IIS settings and headers.
I have tried setting the Access-Control-Allow-Origin on each server, which so far is the only method I've come across that does not involve being able to change the file contents for the app server. This does not appear to work when given the settings (and combinations of settings) of
* or https://app.example.com while on https://host.example.com
* or https://host.example.com while on https://app.example.com
Edit:
The solution to this "duplicate" question is not applicable here. I do not have access to change file contents (including javascript) of the iframed page (app.example.com). Additionally, the script requiring the permission to run is the page within the iframe, not the page hosting the iframe.
CORS headers such as Access-Control-Allow-Origin only affect AJAX requests, not DOM access.
However, If they are both on the same domain but different subdomains then you can include the following on each page:
document.domain = 'example.com';
From MDN:
One document is allowed to access another if they have both set
document.domain to the same value, indicating their intent to
cooperate
If app.example.com has any script includes to host.example.com then you could put the above code in those scripts to set the domain.
e.g.
<script src="https://host.example.com/setup.js"></script>
No, it is not possible.
Access-Control-Allow-Origin primarily affects getting raw data from HTTP requests, not live DOMs.
postMessage can let frames on different origins communicate, but it requires JS to be included on both pages.

Call Chrome-Extension Method from within options page?

I wrote a chrome extension for a specific website. If the extension is installed and I navigate to that site "example.com", my extension calls the following method:
var search="john";
$.get("https://www.example.com/complete/search?q="+search, function (data) {
console.log(data);
});
That works just fine.
Now I have to call the same method from within the options-page of that extension. When I do that, I receive the following error:
XMLHttpRequest cannot load
https://www.example.com/complete/search?q=John. No
'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'http://localhost' is therefore not allowed access.
I understand why this happens but have to find a way to get around this. My idea is to trigger the Extension-Script to call the method and then return the results to the options page. I expect, chrome.runtime.sendMessage() isn't help here.
Needless to say: That domain is not hosted by me, so I can't just change the header.
The error indicates it's not an actual options page: you're opening it (possibly accidentally) through a local webserver (origin: http://localhost/) instead of opening a page packaged with the extension.
You need to add your page (say, options.html) to your extension's folder
You need to add it to the manifest like "options_page": "options.html" or better yet with options_ui
You need to reload the extension to apply the manifest change
You need to open it through the extension, e.g. through chrome://extensions or the context menu of your extension's button (if any)

"Access is denied" error on accessing iframe document object

For posting AJAX forms in a form with many parameters, I am using a solution of creating an iframe, posting the form to it by POST, and then accessing the iframe's content.
specifically, I am accessing the content like this:
$("some_iframe_id").get(0).contentWindow.document
I tested it and it worked.
On some of the pages, I started getting an "Access is denied" error. As far as I know, this shouldn't happen if the iframe is served from the same domain.
I'm pretty sure it was working before. Anybody have a clue?
If I'm not being clear enough: I'm posting to the same domain. So this is not a cross-domain request. I am testing on IE only.
P.S. I can't use simple ajax POST queries (don't ask...)
Solved it by myself!
The problem was, that even though the correct response was being sent (verified with Fiddler), it was being sent with an HTTP 500 error code (instead of 200).
So it turns out, that if a response is sent with an error code, IE replaces the content of the iframe with an error message loaded from the disk (res://ieframe.dll/http_500.htm), and that causes the cross-domain access denied error.
Beware of security limitations associated to iFrames, like Cross domain restriction (aka CORS). Below are 3 common errors related to CORS :
Load an iFrame with a different domain. (Ex: opening "www.foo.com" while top frame is "www.ooof.com")
Load an iFrame with a different port: iFrame's URL port differs from the one of the top frame.
Different protocols : loading iFrame resource via HTTPS while parent Frame uses HTTP.
My issue was the X-Frame-Options HTTP header. My Apache configuration has it set to:
Header always append X-Frame-Options DENY
Removing it allowed it to work. Specifically in my case I was using iframe transport for jQuery with the jQuery file upload plugin to upload files in IE 9 and IE 10.
I know this question is super-old, but I wanted to mention that the above answer worked for me: setting the document.domain to be the same on each of the pages-- the parent page and the iframe page. However in my search, I did find this interesting article:
http://softwareas.com/cross-domain-communication-with-iframes
Note if you have a iframe with src='javascript:void(0)' then javascript like frame.document.location =... will fail with Access Denied error in IE. Was using a javascript library that interacts with a target frame. Even though the location it was trying to change the frame to was on the same domain as parent, the iframe was initially set to javascript:void which triggered the cross domain access denied error.
To solve this I created a blank.html page in my site and if I need to declare an iframe in advance that will initially be blank until changed via javascript, then I point it to the blank page so that src='/content/blank.html' is in the same domain.
Alternatively you could create the iframe completely through javascript so that you can set the src when it is created, but in my case I was using a library which reqired an iframe already be declared on the page.
Basically, this error occurs when the document in frame and outside of ii have different domains. So to prevent cross-side scripting browsers disable such execution.
if it is a domain issue (or subdomain) such as www.foo.com sending a request to www.api.foo.com
on each page you can set the
document.domain = www.foo.com
to allow for "cross-domain" permissions

Categories

Resources