How do I allow the Geolocation API inside an iframe? - iframe

I have an iframe tag with the src being another webpage on a different server. I have the ability to modify the headers of both sites. Before I started implementing the Control Security Policy, I was able to click a button inside the iframe and retrieve the GPS coordinates. I believe there is something about the Control Security Policy that is stopping my parent site from running the Geolocation API.
The Parent Site's Code:
<customHeaders>
<add name="Content-Security-Policy" value="frame-src 'self' https://MyChildSite.com" />
</customHeaders>
<html>
<iframe src="https://MyChildSite.com" allow="geolocation"></iframe>
</html>
The Child Site's Code:
<customHeaders>
<add name="Content-Security-Policy" value="frame-src 'self' https://MyParentSite.com" />
<add name="Feature-Policy" value="geolocation 'self' https://MyParentSite.com" />
</customHeaders>
<html>
<button onclick="getCoordinates()">Get GPS</button>
...list some stuff
</html>
When I click the button on the child site through the parent site, I don't get the response I'd expect from the coordinates.
Is there a solution to this?

,--------------------- parent https://MyParentSite.com ------------------------,
|Content-Security-Policy: frame-src 'self' https://MyChildSite.com |
| * aboved CSP do allow <iframe src="https://MyChildSite.com" |
| |
| |
| <iframe src="https://MyChildSite.com" allow="geolocation"> |
| |
| ,-------------------- nested https://MyChildSite.com --------------------, |
| |Content-Security-Policy: frame-src 'self' https://MyChildSite.com | |
| | 1. aboved CSP do nothing, it will apply to subnested iframes only | |
| | | |
| | 2. allow="geolocation" -> allow="geolocation https://MyChildSite.com" | |
| | which is EQUAL to: | |
| | Feature-Policy: geolocation https://MyChildSite.com | |
| | | |
| | Therefore header: | |
| | | |
| |Feature-Policy: geolocation 'self' https://MyParentSite.com | |
| | will failed to allow https://MyParentSite.com, iframe can not extend | |
| | permissions, given by parent document, see para 2. above. | |
| | As result within iframe you will have only: | |
| | Feature-Policy: geolocation https://MyChildSite.com | |
| | | |
| |________________________________________________________________________| |
| |
| </iframe> |
!______________________________________________________________________________|
Why allow="geolocation" -> allow="geolocation https://MyChildSite.com pls see Directive in the allow= attribute is specified without keys will take origin from src= attribute.
There is some specifics of passing Feature Policy permissions into nested browsing context. Iframe can not delegate himself (or subnested iframes) more permissions tha it granted by parent document.
If you have a script running within iframe, you can use featurePolicy.getAllowlistForFeature interface to get a list of all allowed origins and to see whats going on.
You issue have nothing to do with Content Security Policy, I think you even do not have any CSP violation in the browser console.
The solution is to explicitly specify allowed origins in the allow= attribute:
<iframe src="https://MyChildSite.com" allow="geolocation 'self' https://MyParentSite.com"></iframe>
Alternatively you can remove allow= attribute (or set allow='*'):
<iframe src="https://MyChildSite.com"></iframe>
and to use Feature-Policy: geolocation 'self' https://MyParentSite.com within iframe to set permissions.
Do not forget that geolocation API works in secure context only (means over https: only). You could check window.isSecureContext property to perform appropriate diag.
PS: Could I ask you to add the `feature policy` tag to you question, this will help other peoples in future.
EDIT
allow="*" isn't working anymore but have to mention it as follow allow="geolocation *"

Related

Here Maps javascript api 3.1 and Internet Explorer support

Trying to get a map with pins to display in internet explorer which this page claims to support https://developer.here.com/documentation/maps/topics/overview.html but none of the examples in the developer documentation seem to run in IE 11
Table from url
+===============================+==============================+
| Support Level | Browser |
+===============================+==============================+
| Supported with optimizations: | Edge 17+ |
+-------------------------------+------------------------------+
| | Firefox (latest) |
+-------------------------------+------------------------------+
| | Google Chrome (latest) |
+-------------------------------+------------------------------+
| | Apple Safari 11+ |
+-------------------------------+------------------------------+
| Legacy support: | Internet Explorer 9, 10, 11 |
+-------------------------------+------------------------------+
| | iOS WebView |
+-------------------------------+------------------------------+
| Not supported: | Opera |
+-------------------------------+------------------------------+
| | Internet Explorer < 9 |
+-------------------------------+------------------------------+
Here is an example map that won't load https://developer.here.com/api-explorer/maps-js/maps/interactive-basemap
Does anyone have any working examples of the 3.1 api in IE?
In order to have working map on legacy browsers, you need to include mapsjs-core-legacy.js package.
See https://developer.here.com/documentation/maps/topics/overview.html#overview__modules
Also you need to set engineType parameter when creating map object:
engineType: H.map.render.RenderEngine.EngineType.P2D
See https://developer.here.com/documentation/maps/topics_api/h-map-options.html
Unfortunately the example you attached (Interactive base map) as well as example Change map style at runtime won't work on legacy browsers as they need WebGL rendering engine for vector rendering.

kamailio load balancing with dispatcher

I am configuring kamailio with 2 or more asterisk servers from dispatcher. I configured dispatcher table with 2 asterisk servers.
+----+-------+------------------------+-------+----------+---------------------------------------+-------------+
| id | setid | destination | flags | priority | attrs | description |
+----+-------+------------------------+-------+----------+---------------------------------------+-------------+
| 1 | 1 | sip:*.*.*.*:5160 | 2 | 1 | duid=ABC;maxload=0;my=XYZ | sip 1 |
| 2 | 1 | sip:*.*.*.*:5160 | 2 | 1 | duid=DEF;weight=10;maxload=1;my=SRV02 | sip 2 |
+----+-------+------------------------+-------+----------+---------------------------------------+-------------+
In kamailio.cfg file i configured as
ds_select_dst("1", "10");
I am getting problem while connecting to asterisk. It's giving error and it's taking first entry from dispatcher table.
Error is :
ERROR: dispatcher [dispatch.c:1748]: ds_select_dst_limit(): no dst ID avp for load distribution - using first entry...
Could you please tell me the configuration with argument 10 in ds_select_dest();
and what should i give in "dstid_avp".
The parameter dstid_avp has to be set to a name of an AVP variable and be sure that the AVP is not used by anything else but dispatcher module. For example:
modparam("dispatcher", "dstid_avp", "$avp(dsdstid)")
If $avp(dsdstid) is not used anywhere else in the config, then all should be fine. Actuallt, the AVP can be used for reading its value, but do not delete or modify it.
As extra remark, it might be needed to set the other dispatcher parameters sufixed with _avp (e.g., if you want failure re-routing), the examples from the README of the dispatcher module can be simply taken and added to kamailio.cfg.

Self cookies in cross-domain iframe not working

I've got the situation below:
+-------------------------+
| not-my-website.com |
| +--------------------+|
| | my-website.local ||
| | ||
| |(Can't read or write||
| |its own cookies) ||
| | ||
| +--------------------+|
+---+---------------------+
My problem is that my-website.local is not able to write or read its own cookies (my-website.local cookies).
Most surprising is that google chrome developer console displays the cookies that was existing before (from an another tab where my-website.local in full page), but it does not send cookies with the request to load the iframe content.
Is there a way to get this working ?
Thank you

Partial caching and fiddler?

I'm building a website page with asp.net (webforms).
I'm using partial caching (output caching) for a page. So A and B (user controls) are cached. (while the page is not). Is there any way I can see in Fiddler that A and B are retrieved from the cache while the page is not?
___________________
| Page |
| ____ |
| + + |
| | A |(ascx) |
| +____+ |
| |
| |
| ____ |
| + + |
| | B |(ascx) |
| +____+ |
| |
| |
___________________
edit
Lets say A.ascx contains only :
<span>Hello A</span>
and B.ascx contains only :
<span>Hello B</span>
and the output cache location is "Private" ( for the ascx only !).
Fiddler shows all HTTP requests/responses as they are loaded by your browser.
If A and B are cached by the client, then when the page loads, you will not see requests for either A or B in Fiddler, except on the very first page load. On the first load, A and B will be downloaded (you will see them in Fiddler) and cached on the client.

Multiple onClick events firing

I have several divs that are nested within each other. Each has it's own onclick event. So, imagine that it's like a sandwich, the bottom layer is bread (this layer is geographically larger than the ones that are nested inside),then there's lettuce and then tomato on top.
So, it looks like this:
---------------------------
| Bread |
| |
| ----------------------- |
| | Lettuce | |
| | | |
| | ------------------- | |
| | |Tomato | | |
| | | | | |
| | | <*click> | | |
| | | | | |
| | | | | |
| | ------------------- | |
| ----------------------- |
---------------------------
Currently, when the user clicks on the tomato, it fires off the proper sequence for the tomato, but then things go awry. Because as soon as it fires tomato, it recursively fires lettuce, and then finally the bread.
I suppose it does this because technically the user DID click within those divs, but only because tomato is nested inside them.
The way it should work is that if the user clicks on the Tomato portion of the sandwich, then it should fire off only tomato's event. On the other hand, if the user clicks on the lettuce portion that is peeking out behind tomato, then it should fire lettuce.
So, my question is whether it is possible to make the divs "opaque" for clicks so that even though they are nested inside each other, only the one that was actually clicked on counts.
You can add a return false after your current handler code to prevent the click from bubbling up or propagating...this is what causes the click events on the parent elements.
I would suggest the following reading for a better understanding of what's happening: quirksmode.org's excellent explanation of event bubbling.
In non-IE browsers event.stopPropagation(); will stop the event from bubbling up to parent nodes, in IE, event.cancelBubble = true; should do the trick. event is the argument passed to the listener.
Hey guys, thanks for the help. Unfortunately, I think I may have inadvertently left out a vital piece of information. The JS in this case is actually firing an AJAX request back to the server. So, for some reason in this type of situation the "return false" on the event handler didn't work.
I suspect that the XMLHttpRequest call to the server was probably all fired at the same time.
However, I was able to fix the problem by putting a block-level (empty) <a> tag inside the div, and then putting my click event on the <a> tag instead of the <div>.
So I just changed the code from this:
<div class='container' id='idstring' onclick="ajaxcall(parameters)">
<? server-side call to recursive function ?>
</div>
To this:
<div class='container' id='idstring'><a onclick="ajaxcall(parameters)">
<? server-side call to recursive function ?>
</a></div>

Resources