More informational CSP example and desc.

Resolves  h5bp#156

src/security/content-security-policy.conf

@@ -8,18 +8,69 @@
 # This can be done by setting a `Content Security Policy` which
 # whitelists trusted sources of content for your website.
 #
-# The example header below allows ONLY scripts that are loaded from
-# the current website's origin (no inline scripts, no CDN, etc).
-# That almost certainly won't work as-is for your website!
+# There is no one policy that fits all websites, you will have to modify
+# the `Content-Security-Policy` directives in the example below depending
+# on your needs.
 #
-# To make things easier, you can use an online CSP header generator
-# such as: https://www.cspisawesome.com/.
+# The example policy below ensures that:
 #
+#  (1) The `<base>` element is not allowed on the website. This is to
+#      prevent attackers from changing the locations of resources loaded
+#      from relative URLs.
+#
+#      If you want to use the `<base>` element, then `base-uri 'self'`
+#      can be used instead.
+#
+#  (2) All resources are restricted to the origin of the current website
+#      by setting the `default-src` directive to `'self'` - which acts as a
+#      fallback to all "Fetch directives" (https://developer.mozilla.org/en-US/docs/Glossary/Fetch_directive).
+#
+#      This is conveniant as you do not have to specify all Fetch directives
+#      that apply to your site, for example:
+#      `connect-src 'self'; font-src 'self'; script-src 'self'; style-src 'self'`, etc.
+#
+#      This restriction also means that you must explicitly define from
+#      which site(s) your website is allowed to load resources from.
+#
+#  (3) Scripts are only allowed to be loaded from the current website
+#      and an example CDN website.
+#
+#  (4) Form submissions are only allowed from the current website by
+#      setting: `form-action 'self'`.
+#
+#  (5) Prevents other websites to embed your website with e.g. the
+#      `<iframe>` or `<object>` element, by setting `frame-ancestors 'self'`.
+#
+#	   The `frame-ancestors` directive helps avoid "Clickjacking" attacks
+#      and is similar to the `X-Frame-Options` header.
+#
+#      Browsers that support the CSP header will ignore `X-Frame-Options`
+#      if `frame-ancestors` is also specified.
+#
+#  (6) Forces the browser to treat all the resources that are served over
+#      HTTP as if they were loaded securely over HTTPS by setting the
+#      `upgrade-insecure-requests` directive.
+#
+#      Please note that `upgrade-insecure-requests` does not ensure
+#      HTTPS for the top-level navigation. If you want to force the
+#      website itself to be loaded over HTTPS you must include the
+#      `Strict-Transport-Security` header.
+#
+# To make your CSP implementation easier, you can use an online CSP header
+# generator such as:
+# https://www.cspisawesome.com/
+# https://report-uri.com/home/generate/.
+#
+# It is encouraged that you validate your CSP header using a CSP validator
+# such as:
+# https://csp-evaluator.withgoogle.com
+#
+# https://csp.withgoogle.com/docs/
 # https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy
-# https://www.w3.org/TR/CSP3/
-# https://content-security-policy.com/
 # https://www.html5rocks.com/en/tutorials/security/content-security-policy/
+# https://www.w3.org/TR/CSP/
 
 <IfModule mod_headers.c>
-    Header set Content-Security-Policy "script-src 'self'; object-src 'self'" "expr=%{CONTENT_TYPE} =~ m#text/html#i"
+    #                                   (1)              (2)                 (3)                                        (4)                 (5)                     (6)
+    Header set Content-Security-Policy "base-uri 'none'; default-src 'self'; script-src 'self' https://cdn.example.com; form-action 'self'; frame-ancestors 'self'; upgrade-insecure-requests" "expr=%{CONTENT_TYPE} =~ m#text/html#i"
 </IfModule>