0

So I'm trying to implement webpush notifications for an AMP page, following the official documentation:

https://amp.dev/documentation/components/amp-web-push

But there is an issue when adding the <amp-web-push> component and specifying the helper-iframe-url that points to the amp-web-push-helper-frame.html, the one I've downloaded from the official page.

When I open my AMP page in browser, there are an error in the console:

Refused to display 'https://mytestsite.com/test/amp/amp-web-push-helper-frame.html?parentOrigin=https://mytestsite.com' in a frame because it set 'X-Frame-Options' to 'deny'.

And regarding that, I cant interact with the service worker. I took a look at the official AMP demo and there's no X-Frame-Options header with deny value.

This is my HTML templates:

AMP component:

<amp-web-push
        id="amp-web-push"
        layout="nodisplay"
        helper-iframe-url="https://mytestsite.com/test/amp/amp-web-push-helper-frame.html"
        permission-dialog-url="https://mytestsite.com/test/amp/amp-web-push-permission-dialog.html"
        service-worker-url="https://mytestsite.com/test/amp/service-worker.js">
</amp-web-push>

AMP widget

    <amp-web-push-widget visibility="unsubscribed" layout="fixed" width="245" height="45">
        <!-- Custom banner goes here... -->
    </amp-web-push-widget>

So I spent the whole day searching for solution and refactoring but still with the problem.

Vadim Kotov
  • 8,084
  • 8
  • 48
  • 62
Roman
  • 113
  • 6
  • 1
    The X-Frame-Options header is defined by your backend server software or reverse proxy (nginx, apache, envoy, etc). You have to change it to X-Frame-Options: sameorigin. – filipe May 29 '19 at 14:40
  • Thanks, @filipe, it resolved my trouble! Now it works fine! – Roman May 29 '19 at 17:08
  • Well, solving the previous issue, a new one appeared... When the helper is loaded, have the following error: `Uncaught ReferenceError: module$build$all$amp_web_push_0_1$window_messenger is not defined`. So I going to search for solution. – Roman May 30 '19 at 08:03
  • Regarding my last comment, it was an error of my service worker, so now it works fine. – Roman May 31 '19 at 10:20

1 Answers1

0

The X-Frame-Options header is defined by your backend server software or reverse proxy (nginx, apache, envoy, etc).

You have to change it to X-Frame-Options: sameorigin.

filipe
  • 1,957
  • 1
  • 10
  • 23