Can't access iframe of different origin in the parent jsp - apache

Quick example for the kind of functionality required (just for exampple):
http://www.indeed.hk/cmp/Calvin-Klein-Jeans-&-Calvin-Klein-Underwear/jobs/Part-Time-Sales-Associate-1643e24903d9f4c7
If you click on apply-now button, it shows an iframe.
I am having a project where I am trying to access an iframe of different origin, say https: //subdomain.example.com, on a jsp page of origin say http://www.example.com but it gives me the following error:
Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin http://www.example.com from accessing a frame with origin https://subdomain.example.com. The frame requesting access has a protocol of "http", the frame being accessed has a protocol of "https". Protocols must match.
Lets call the parent jsp page as parent.jsp, and the iframe jsp as iframe.jsp.
parent.jsp is on server S, and the project name is xyznet
iframe.jsp is on server R, and the project name is xyz
Here is a piece of code from the parent.jsp
<%
java.util.Map model = (java.util.Map)pageContext.findAttribute("model");
%>
<html>
<body>
<h1> This is the parent page
<iframe id="quick-apply-frame" name="iframe-name" src=" <%=https: //sub.domain.com/apply.html?ref=${model.x.y}" onload="quickSetParams();">
</iframe>
<script>
function quickSetParams() {
$("[name=iframe-name]").contents().find("[name=iframe-param-name]").val(${model.value1}');
}
</body>
</html>
And here is piece of code from the iframe.jsp
<html>
<body>
<form action="xyz.html">
<input name="iframe-parm-name" value=""/>
<input name="iframe-parm-name2" value="${model.parm2}" />
</form>
</body>
</html>
Handler which loads the iframe.jsp is a SimpleFormController, located on server R
I have come across some solutions where the data is transferred directly using javascript, but I need a handler for this, and so, a direct javascript redirect or nesting of iframes would not work for me

Thanks James for some leads. I finally got it working!
I still dont completely understand how it works, but here is what I did:
I dont load the iframe.jsp (located in https: //sub.domain.com) at the same time as the parent.jsp is loaded. Means, the src of the iframe is not set initially.
Instead, I call a javascript function to load the iframe once the "showIframe" button in the parent is clicked. I got a suggestion from someone that to crack cross domain security issue, you have to set the src of the iframe via javascript after the page loads.
Some more pointers other can explore is CORS, where you add a parameter like this in your ssl.conf or httpd.conf (apache configuration)
Header set Access-Control-Allow-Origin "http://www.domain.com" . It basically grants permission to access to the domain mentioned

Related

VueJS real SEO friendly 404 page for search engines like Google / MSN

I am not VueJS programmer, but I work with in a company where we developing a VueJS website.
The website have articles. The URL is something like this:
http://example.com/here_is_news_from_sofia.htm
However if you type:
http://example.com/here_is_news_from_blabla.htm
You should go to 404 page.
I inspected several websites and stackoverflow questions, they explain how you should do catch-all router etc, so finally you get a page with "404 Not Found" text on it.
However, in ALL cases, the HTTP code send to the client is not 404, but 200.
With my team, I elaborated this:
When you go to any article, you get something like this:
<html>
<body>
<div id="app">
<app />
</div>
<script src="/js/client.js"></script>
</body>
</html>
Of course, if you click on a link, this page remains and everything is loaded via JS dynamically.
Then lets suppose article is not found.
VueJS will be able to show "404 Not Found" as text, but because HTTP headers are already send (HTML page is already loaded), it will not be able to send 404 code to the client.
For the same reason, VueJS can not send 301 code redirect to the client.
VueJS can incorrectly change the URL in the browser to "http://example.com/404.htm" - this is NOT a correct solution for search engines, since this is purely client-side (in-browser) "trick".
The other think it can do is to execute fancy redirect, as shown here Vue-router redirect on page not found (404) :
Vue.component("page-not-found", {
template: "",
created: function() {
// Redirect outside the app using plain old javascript
window.location.href = "/404.htm";
}
}
This will make the browser to reload the /404.htm page from the server and if the server (Apache / Nginx) is configured correctly, it will send "correct" 404 code to the client.
However I don't think Google and MSN will recognize that http://example.com/here_is_news_from_blabla.htm is a 404 page.
Am I missing anything?
Is there another way VueJS might handle this situation?
How VueJS websites gets indexed from search engines like Google and MSN?
Off topic bonus question - can VueJS generate visible HTML code that contains the article?
If that's a single page application, you can set up dynamic route matching with parameters with vue-router. And dynamically update your meta tags with javascript. I am using quasar vue framework, which handles all of this SEO feature.
I added slug data to the article saved in the database and use it as a route parameter.
https://quasar.dev/vue-composables/use-meta
https://router.vuejs.org/guide/essentials/dynamic-matching.html
You can use quasar vue framework, develop vue app in SSR mode and deploy it to the server.
https://quasar.dev/quasar-cli-vite/developing-ssr/handling-404-and-500-errors

Open URL in a new tab/window with CGI [duplicate]

For a banner management system i use a
header("Location: http://www.awebsite.com");
to redirect to the proper website. Is it possible to force this header script to open in a new window?
<a href='yourbannerscript.php' target='_blank'>...</a>
No. If you want a new window, you have to deliver the redirect as HTML/Javascript.
This works for me
echo "<script>window.open('yoursite.com');</script>";
It would be nasty, and might not be want you want, but including an IFRAME tag pointing to a php file with the header redirect could be a solution. Doesn't create a new window, but creates a window-within-a-window.
<iframe src="/myredirectscript.php"></iframe>
You should redirect to a page with a redirect metà tag like the one on the most voted answer at Open HTML meta redirect in new window
So the page you redirect your headers to will contain a metà tag with:
<meta http-equiv="refresh" />
<meta content="0; URL=javascript:window.open('http://uri.of
.your.pagewhereyouwabtoredirect/path','_parent');"/>
It's Not possible.. Instead of that you can set open new tab in form attribute target="_blank"
<form target="_blank" method="post" action="contact-function.php">

Shopify add new index.html page with url https://myshopifyshop/index.html

I am working with external tracking service. They sent my index.html file, which looks like this:
<html>
<head>
<!-- tag -->
<script type="text/javascript" src="//path.js"></script>
</head>
<body>
</body>
</html>
They want us to upload this file to shopify and sent them the url to it. The url should look like this https://myshopifyshop/index.html. I couldn't find any article how to upload or create new blank html page with .html extension. Is this somehow possible?
You can't create an html page that will follow the root url of your site.
But you can upload a html page as an asset and link that asset as a page.
Example url will be:
https://cdn.shopify.com/s/files/1/*****/*****/t/4/assets/index.html
But I don't think that this will do you any good, since tracking services requires you to track the current site and not a dummy file that no one will ever open.
It's highly possible that the only important part is the script and everything else is not needed.
So you actually may need to add the script in your layout/theme.liquid file and ignore the rest.
Please contact the the tracking service and let them know that you are not using a static HTML site, but a Shopify one and what steps should you follow.

Firefox: "Some parts of this page are not secure, such as images." What counts as insecure?

I use the browser Firefox, and sometimes, on certain webpages, the SSL icon says "Some parts of this page are not secure, such as images." What, exactly, counts as an insecure element?
Thanks!
Anything that is delivered over an insecure channel.
What this generally means is that the developer of the web page is combining HTTP-based URLs with HTTPS-based URLs in the same page. The URLs could be for images as well as JavaScript, CSS, or anything else that can be referenced from a web page. As a user, there's not much you can do about this -- it's a warning that there is a possibility that your data could be delivered to other servers in an open, unencrypted manner over the Internet. This is a Bad Thing, but you can't do much except avoid that site, or contact the support or webmaster for the site.
If you're the developer, most of the time you can use a scheme-relative URLs when referencing images or javascript, etc.
i.e. Instead of this:
<img src="http://example.com/dot.png">
use this:
<img src="//example.com/dot.png">
YMMV.
See also: https://url.spec.whatwg.org/
In firefox you can see in Inspect Element=>Network Tab=>Domain Columns.
And also please check in Console tab too.
I hope it will solve your problem.
"Insecure" simply means "not loaded via HTTPS".
This is insecure:
<img class="media-object" src="http://placehold.it/50x50">
This is secure:
<img class="media-object" src="https://placehold.it/50x50">
"Some parts of this page are not secure, such as images."
means not all content are are loading with secure https you can use this online tool to determine which resource is loading with http whynopadlock
This is My Solution
To resolve this issue make sure that the page code does not pull data directly from a non-secure URL.
View the page source html code to check for non-secure items. This can be done in a web browser by doing a right click and selecting 'view source'.
To identify non-secure elements view the source code of the page and search for the text src="http://
This will then highlight elements on your page being loaded from a non-secure URL.
The source code (HTML) needs to be checked for NON SECURE tags. (i.e. http://www.symantec.com/images/seals/Secure...) Ensure the following references are changed to HTTPS or a virtual directory.
Note: The webmaster should always be consulted prior to any adjustments made to a web site.
Thank You and I hope this will Help out
For wordpress users that can't find any 'http:' in the page source check if you have a favicon set. Wordpress will default to their W icon (w-logo-blue.png) and I've had a couple sites continue to serve it from http even after fully converting to ssl.
Dashboard -> Appearance -> Customize -> Site Identity -> add a site icon
FOR IMAGES
First of all, check whether your image file has HTTP instead of HTTPS if so change it to https or rather save those images and put in in the Server.
For instance,
<img src="http://example.com/images/image.jpg">(http image source)
to
<img src="https://example.com/images/image.jpg">(https image source)or into
<img src="//example.com/images/image.jpg">(server image)
Firefox throws an error when you have mixed active content. This is having a combination of HTTP and HTTPs requests; it's a security issue as it leaves room for man in the middle attack- intercepting HTTP content requests with malicious or unwanted requests.
Tip: Check all the following urls in your active content:
< script >
< link >
< iframe >
< XMLHttpRequest >
fetch()
urls in CSS (#font-face,cursor,background.image)
< object >
Navigator.sendBeacon (look for url)
Another tip: make sure to check all files (css gets overlooked)

Why is HTML POST form interpreted as GET when using an absolute URL?

I was writing a test HTML form locally, invoking a distant webpage in the action field. However I figured that though set as POST, the form would only send GET data. I moved it on the distant server, but it behaved the same way. Then I changed the absolute URL to a relative one and it worked.
Is it expected, or is there some server setting to change this behaviour ?
Here is an almost minimal form reproducing the issue :
<form action="http://example.com/foobar.php" method="post">
<input type="text" name="blah">
<input type="submit" value="Submit">
</form>
For testing purposes foobar.php could contain
<?php echo $_SERVER['REQUEST_METHOD']; ?>
Edit : There must be something wrong with my setup, since I can find loads of similar and supposedly working samples on the web (and actually this is what I am supposed to achieve at the end).
Got it, this is because POST data is discarded on 301 Permanent Redirect, and I was using a ServerAlias with RedirectMatch 301.
A solution could be to use 307 Temporary Redirect but I think I will just stick to the main ServerName.