Feature-Policy Header

Posted at



Very early draft, but newest Chrome/Chromium will show warnings,
if you do not allow the use of those features.


Also, you probably need to activate handling this new, draft feature in your Chrome's flags-section: chrome://flags/#enable-feature-policy, otherwise Chrome will probably ignore any directives..
Either from HTTP-headers or iframe attributes... and will apply the simple can/can't logic (for example, vibration enabled only when inside a user-click handle method, etc..) .


Here is an Apache snippet to add a few useful features:

#feature policy
<ifModule mod_headers.c>
Header set Feature-Policy '{"vibrate":["*"],"geolocation":["*"],"fullscreen":["*"]}'
</ifModule>


read more: https://github.com/WICG/feature-policy


For iframes you should either use the same format of JSON-like,
or a simpler one that uses enable attribute, still not 100% set.

you may specify both for now, and best to allow them with sandbox too (more secure):

<iframe src="https://..." sandbox="allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-top-navigation" seamless="false" featurepolicy='{"vibrate":["*"],"geolocation":["*"],"fullscreen":["*"]}' enable="vibrate geolocation fullscreen"></iframe>




here is a full HTML working example:


<!doctype html>
<html itemscope="" itemtype="http://schema.org/WebPage" dir="rtl" lang="he-IL" language="Hebrew" charset="UTF-8" encoding="UTF-8">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta charset="UTF-8"/>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<meta name="viewport" content="height=device-height,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,width=device-width,minimal-ui"/>
<meta name="robots" content="index,follow,snippet,archive,odp,translate,imageindex">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<link rel="icon" href="favicon.ico" type="image/x-icon"/>
<meta name="description" content="Nikud is a mobile-friendly-website to help you add Hebrew-punctuation and copy&paste the content very easily to be used in somewhere else such as whatsapp.">
<meta name="keywords" content="Nikud,punctuation,ניקוד,Hebrew,עברית,עברי">
<title>נִיקוּד | Nikud</title>
<style type="text/css" media="all">
/*<![CDATA[*/
@charset "UTF-8";
@namespace "http://www.w3.org/1999/xhtml";
html,body,iframe{
touch-action: manipulation;
text-align: right;
vertical-align: baseline;
display: block;
resize: none;
-webkit-user-drag: none;
-moz-user-drag: none;
user-drag: none;
direction: rtl;
position: absolute;

width:100%;
height:100%;
overflow:hidden;

position:absolute;
top:0;
bottom:100%;
left:100%;
right:0;

outline: none;
border: none;
padding: 0;
margin: 0;
box-sizing: border-box;
text-size-adjust: 100%;
}
/*]]>*/
</style>
</head>
<body><iframe allowfullscreen="true" frameborder="0" marginheight="0" marginwidth="0" referrerpolicy="unsafe-url" scrolling="yes" featurepolicy='{"vibrate":["*"],"geolocation":["*"],"fullscreen":["*"]}' enable="vibrate geolocation fullscreen" sandbox="allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-top-navigation" seamless="false" target="" src="https://eladkarako.github.io/nikud/"></iframe></body>
</html>