Show a div from another php file with absolute path

JavaScript
1

I know that with jquery I can show a div from another (html or php) file, with the following code:

<p id="new"></p>
 
<script>
$( "#new" ).load( "myfile.php #mydiv" );
</script>

I managed to get the div content from folders different than where is the file. But always with relative path.

With an absolute path (beginning with http://) I didn’t managed to get the expected result, such in the following code:

<p id="new"></p>
 
<script>
var base_url = 'http://localhost';
$( "#new" ).load(base_url + "/my-path/my-file.php #my-div" );

</script>

Where I’m wrong?

2

Hi @web148, there’s nothing wrong with your code per se as far as I can tell… are you sure the URL is correct though? Try opening it with your browser directly:

http://localhost/my-path/my-file.php

My guess would be that you’re missing the port number in the URL, so it would be something like this:

http://localhost:8080/my-path/my-file.php

PS: Actually you don’t even need to specify the full URL to use an absolute path – on the contrary, your app won’t work any more if you deploy it to a another host with a different URL.

3

Just to add, what is logged out if you change your .load line to this?

$( "#new" ).load(base_url + "/my-path/my-file.php #my-div", function( response, status, xhr ) {
  if ( status == "error" ) {
    console.log( xhr.status + " " + xhr.statusText );
  }
})
4

Yes, or just check the network panel of the browser dev tools. :-)

2 Likes
5

That would be too easy :slight_smile:

1 Like
6

This is the error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost/mypath/myfile.php. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200.
7

You cannot load content of a site from a different domain to your webpage. This is a security feature. Otherwise it would be easy to hack a page and show content of a complete other server and the user would never recognize it.

2 Likes
8

But it should be possible to set

Access-Control-Allow-Origin: https://my-website

Where I should put that line?

EDIT
If I set only a trusted website, there are still security issues?

9

Incorrect. Headers can be added to the response. However, you need to have access to the origin to do that. You can also open up an api but enforce zero trust for security. Zero trust is the most reliable up to date security model for authenticating and authorizing requests between separate resources, apps, infrastructure. The simple way is adding CORs headers.

1 Like
10

How?
I noticed that using php, in this way,
<?php header('Access-Control-Allow-Origin: https://my-website/'); ?>
doesn’t work.

11

To begin with, what is the origin of your web page then – is it not your localhost?

12

yes, at the present, http://localhost …
But I plan to use it in my remote website.

13

I don’t promote nor work with php any longer.

That said have you tried searching for “PHP CORS”?

14

@m3g4p0p probably wanted a more specific answer. What is the complete URL of the main page that this ajax code is on?

Based on your posts, you may be switching between https and http. This alone can trigger the cross-organ blocking -

Due to browser security restrictions, most “Ajax” requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, port, or protocol.

2 Likes
15

Even “switching between https and http” nothing changes.
I guess that, as said @Thallius there is a security problem, but as replied @windbeneathmywings that could be bypassed. Therefore I think that the question is how bypass that restriction modifying the Access-Control-Allow-Origin, isn’t it?

16

Well if the origin is supposed to be the same, then why specify it in the first place? You’d have to change the code when deploying to another host with a different name, so just use the path name here…

17

Bypassing a security problem is NEVER EVER a good idea!

1 Like
18

I just confirmed that both of your examples work as expected, without any additional settings, when the domain, subdomain, port, and protocol are the same for the main page and for the ajax request.

What exactly did you change? Post your current full non-working code to get help with it.

And please answer directly if you want this to work where the two files are located on the same domain or on two different domains?

And as has already been written, why are you trying to make this work with an absolute URL, instead of just relative URLs?

BTW - These are URLs, which have a path component, after the filename. The first usage is a relative URL. The browser takes the URL of the current page and appends the relative URL from your code, to come up with the absolute URL to make the ajax request to. The second usage is directly putting an absolute URL into the code.

1 Like
19

Yes, this is correct. This time, I tried, respecting your conditions, and it worked (in localhost).

But my final goal is “to work where the two files are located (…) on two different domains”.
It would be possible?
And there would be a security risk?

20

Yes there is.

If you want to show content from another site this data must be loaded from the server not the client. So you call some server script on your domain and this server script is fetching the data from the other side and give it back to the client.

1 Like