I can register service worker via iframe. When I try to run "pushManager.subscribe" I have:
DOMException: Registration failed - permission denied
This problem is only in Chrome via iframe. It works good in Firefox. And it works good without iframe in Chrome
You cannot use an iframe, it isn't allowed.
The permission request must be performed from the top level window.
The only alternative (that we have used for Pushpad Express for example) is to redirect to / open a new window from the iframe, then ask permission from the top level window and finally redirect back.
This is meant to make it clear for the user which website is asking the permission for push notifications. Otherwise the fear is that an ad for example may show a prompt for push notifications and that would be misleading.
BTW I had also suggested to add a new value to the sandbox attribute of iframes in order to allow prompts for push notifications, but the spec currently doesn't support it.
Long story short, you can't!
The path you are registering service worker on must be opened (be a top level domain) for it to register a service worker.
One way to achieve this is:
suppose your iframe looks like this:
<iframe src="https://example.com"></iframe>
use postMessage to communicate with iframe and ask for permission and then window.open("https://example.com/") to register the service-worker and fetch the token.
Hope this helps :)
Chrome requires you to subscribe to push from a top level domain since otherwise it is less clear what origing is the user allowing push to.
Related
I'm a new to web development, I recently finished my degree and started working for a company as a web developer. I work alone on this project, and I have encountered myself against a problem that I don't think I'm able to solve (If it has a solution at all). It's complicated to explain it but I'll try my best.
I am at the moment, building a portal website where users will be able to access the solutions we offer. To do so I've created the website portal.name.solutions, in this portal multiple web apps will be accessible. The approach taken to achieve it is using iFrames (from what I've read web components are better but also more difficult so maybe will try that on the future) most of the web apps are implemented through an iFrame with no problem. I just want to iFrame an URL and obtain full functionality, not adding JS nor anything.
This solutions that we are trying to iFrame to are self-hosted.
Problem comes for application.name.solutions which is build using ASP.NET. I couldn't iFrame it, therefore I added the next header:
Content-Security-Policy: frame-ancestos 'self' *.name.solutions:*
This would allow me to iFrame the solution. Problem comes when a pop-up window appears on the ASP.NET. Apparently this application implements a lot of its functionality with iFrames.
Popup windows included, this windows apparently are running in another port. The path for the popup is like this: application.name.solutions/path/popupdialogs/specificDialog.aspx.
I can close this popup windows pressing the X, but this popups normally have two buttons that execute javascript to save information or close the window and return to the parent iframe. When I try to use any of this buttons it throws an error and does nothing.
I haven't been able to debug this, I'll add the errors that it is throwing, this vary in google chrome and Firefox and depending if the console is open or closed.
Google Chrome with console closed:
Uncaught SecurityError: Blocked a frame with origin "https://aplication.name.solutions" from accessing a frame with origin "https://portal.name.solutions". Protocols, domains, and ports must match.
Google Chrome with console open:
Uncaught DOMException: Blocked a frame with origin "https://aplication.name.solutions" from accessing a cross-origin frame.
at HTMLAnchorElement.onclick (https://aplication.name.solutions/path/path/popupdialogs/InformationDialog.aspx:218:145)
onclick # InformationDialog.aspx:218
Firefox:
Uncaught DOMException: Permission denied to access property "hidePopWin" on cross-origin object
onclick https://aplication.name.solutions/path/path/popupdialogs/InformationDialog.aspx:1
As all error codes say I assumed this could be a CORS problem and added the next header to portal.name.solutions:
Access-Control-Allow-Origin: *
And it still wont allow me to use the popup buttons. I don't know what to do from here if there is any more information that I can provide to get a solution please let me know.
In a very similar fashion with a related question, the web application I have creates an iFrame to a login form, with a certain URL and a bunch of GET parameters, but until the said URL is opened in a separate window at least once, the page loaded in the iFrame doesn't seem to be getting the GET parameters at all. This is not a PHP application, however, so there's no session_start issue as suggested in the answer to the related question.
I tried tracing the network with Charles, and the only outgoing request I see is a CONNECT request to the domain of the URL without any GET payload.
Not sure if related or important: the main page domain is HTTP, the login form is on HTTPS.
Is there some preflight voodoo that needs to be done for this to work?
The whole solution works as is on Safari 10 and other browsers, IE included.
The problem was with the Preferences -> Privacy -> Prevent cross-site tracking being set to on. When switched to off works like a charm.
I'm using
window.postMessage({message: "Hello !"}, url);
to send a message from a Chrome Extension (i don't know if this is relevant) to a specific page in a window with multiples opened pages. I noticed that sometimes i have TWO pages with the same URL.
I have a simple question:
How can i be sure to which page is postMessage sending the message ?
I want to send the message to only one tab. Can i use anything else apart from the url to identify the it?
Thanks in advance !
Considering that you said you can modify the remote website's code, and I don't see how to fix the postMessage solution, here are a couple of alternatives. I would love to know if there is a way to fix the postMessage approach, as it is the recommended one from the docs!
First off, you will need to coordinate your scripts from a central background page, which can keep track of open tabs.
Custom DOM events
This is an old recommendation from Chrome docs, that was replaced with window.postMessage example. It is described here (disregard the old chrome.extension.connect API) and consists of firing a custom event in shared DOM.
So, a sample architecture would be a background page deciding which tab to post message to, and sending that tab a message via chrome.tabs.sendMessage, to which your content script listens with chrome.runtime.onMessage. The tab's content script can then communicate with the page using the above custom event technique.
One possible approach to keeping tack of tabs: have the tabs permission to be able to enumerate all open tabs with the chrome.tabs API. Your background page can then decide which tab to message based on URL.
Another possible approach, to eliminate need for the scary tabs permission, is to have your content scripts report to the background page with chrome.runtime.connect as soon as they are initialized. The background page then can keep track of all active instances of your script and therefore decide which tab to message.
Webpage connecting to your extension
This is a "modern" way of doing communication with one exact extension.
It is described in the Chrome docs here. You can define your extension as externally connectable from your webpage, and your webpage initiates a port connection with your background script.
Then, as above, you can track live ports and use them for communication, cutting out the content script middleman.
I have question :) Can I send message via Web Messaging or not to other tab in browser? For example I have openede my site, and now watching on other site. And when some condition will be pass my site sends messages which makes alert on the other page.
Assuming you have control over both pages, the answer is "yes", provided you open the second window from the first. window.postMessage only works if you can get a handle to the window. Therefore, if your background site were to invoke window.open() to get to your "other" site, then you could retain a handle to it in your first page's script.
As far as opening it in a tab goes, you'll have to specify that in your browser options.
i've a question about cookie and domains.
Suppose I drop a cookie to a user from domain www.firstdomain.com. Suppose the user visits another page under the domain: www.seconddomain.com. How can I access to my cookie previously set from this page?
I know that access to a cookie with domain=firstdomain from a domain=seconddomain is not possible, but if I've the possibility to use an iframe on the page www.seconddomain.com and I load the iframe from www.firstdomain.com/something, then can I access to my cookie?
Thank in advance,
Alessio
You are flying in the face of internet security and privacy - so while it is possible to do this today you need to anticipate some issues in the future.
It is possible to implement javascript handlers to set and get values from a cookie and the call from different iframes. This I expect is the safest route.
The iframe would have to consent by implementing helper functions to perform these tasks so things remain controlled.
The iFrame would have permission to read the cookie and then can communicate to the parent iframe using a call to the parent window.
An example is here:
How to Call Parent Window JavaScript Function inside iframe