browser-policy
Source code of released version | Source code of development version
The browser-policy
family of packages, part of
Webapp, lets you set security-related
policies that will be enforced by newer browsers. These policies help
you prevent and mitigate common attacks like cross-site scripting and
clickjacking.
Details
When you add browser-policy
to your app, you get default configurations for
the HTTP headers X-Frame-Options and Content-Security-Policy. X-Frame-Options
tells the browser which websites are allowed to frame your app. You should only
let trusted websites frame your app, because malicious sites could harm your
users with clickjacking
attacks.
Content-Security-Policy
tells the browser where your app can load content from, which encourages safe
practices and mitigates the damage of a cross-site-scripting attack.
browser-policy
also provides functions for you to configure these policies if
the defaults are not suitable.
If you only want to use Content-Security-Policy or X-Frame-Options but not both,
you can add the individual packages browser-policy-content
or
browser-policy-framing
instead of browser-policy
.
For most apps, we recommend that you take the following steps:
- Add
browser-policy
to your app to enable a starter policy. With this starter
policy, your app's client code will be able to load content (images, scripts,
fonts, etc.) only from its own origin, except that XMLHttpRequests and WebSocket
connections can go to any origin. Users'
browsers will only let your app be framed by web pages on the same origin as
your app. Further, your app's client code will not be
able to use functions such as eval()
that convert strings to code.
However, note that if you also use the dynamic-imports
package, this limitation
on eval()
is lifted.
- You can use the functions described below to customize the policies. If your
app does not need any inline Javascript such as inline <script>
tags, we
recommend that you modify the policy by calling
BrowserPolicy.content.disallowInlineScripts()
in server code. This will result
in one extra round trip when your app is loaded, but will help prevent
cross-site scripting attacks by disabling all scripts except those loaded from a
script src
attribute.
Meteor determines the browser policy when the server starts up, so you should
call BrowserPolicy
functions on the server in top-level application code or in
Meteor.startup
. BrowserPolicy
functions cannot be used in client code.
Frame options
By default, if you add browser-policy
or browser-policy-framing
, only web pages on the same origin as your app are allowed to frame your app. You can use
the following functions to modify this policy.
Content options
You can use the functions in this section to control how different types of content can be loaded on your site.
You can use the following functions to adjust policies on where Javascript and CSS can be run:
Finally, you can configure a whitelist of allowed requests that various types of content can make. The following functions are defined for the content types script, object, image, media, font, frame, frame-ancestors, style, and connect.
You can also set policies for all these types of content at once, using these functions:
BrowserPolicy.content.allowSameOriginForAll()
,BrowserPolicy.content.allowDataUrlForAll()
,BrowserPolicy.content.allowOriginForAll(origin)
BrowserPolicy.content.disallowAll()
For example, if you want to allow the
origin https://foo.com
for all types of content but you want to disable
<object>
tags, you can call
BrowserPolicy.content.allowOriginForAll("https://foo.com")
followed by
BrowserPolicy.content.disallowObject()
.
Other examples of using the BrowserPolicy.content
API:
BrowserPolicy.content.disallowFont()
causes the browser to disallow all
<font>
tags.
BrowserPolicy.content.allowImageOrigin("https://example.com")
allows images to have their src
attributes point to images served from
https://example.com
.
BrowserPolicy.content.allowConnectOrigin("https://example.com")
allows XMLHttpRequest
and WebSocket connections to https://example.com
.
BrowserPolicy.content.allowFrameOrigin("https://example.com")
allows
your site to load the origin https://example.com
in a frame or
iframe. The BrowserPolicy.framing
API allows you to control which
sites can frame your site, while
BrowserPolicy.content.allowFrameOrigin
allows you to control which
sites can be loaded inside frames on your site.
Adding browser-policy-content
to your app also tells certain
browsers to avoid sniffing content types away from the declared type
(for example, interpreting a text file as JavaScript), using the
X-Content-Type-Options
header. To re-enable content sniffing, you can call
BrowserPolicy.content.allowContentTypeSniffing()
.