Prevent a Flutter webapp to be embedded on iFrame.

huangapple go评论61阅读模式
英文:

Prevent a Flutter webapp to be embedded on iFrame

问题

以下是翻译好的部分:

有没有办法阻止/检测任何网站将我发布的Flutter Web应用嵌入到域名中?

我在Firebase上创建了一个项目,并在其中托管了一个Flutter Web应用:https://friendlyeats-flutter-codelab.firebaseapp.com/#/

我注意到,如果我将这个网址添加到一个iFrame中,Web应用会在任何网站的iFrame中显示。有没有办法防止这种情况发生?

我尝试使用 Uri.base.hostUri.base.originUri.base.authority(通过在屏幕上显示这些值的消息,以便查看是否可以检测到嵌入Web应用的主机),但它们都显示为friendlyeats-flutter-codelab.firebaseapp.com,即使我在不同的域名(例如 some-website.com)的iFrame中嵌入Web应用也是如此。

有没有办法使用Dart/Flutter来检测iFrame的主机?

编辑:

我也尝试了以下方法,但结果相同:

  • html.window?.location?.host
  • html.window?.location?.href
  • html.window?.location?.origin
  • html.window?.origin
  • html.window?.document?.origin(null)
  • html.window?.document?.domain
  • html.window?.document?.baseUri
  • html.window?.document?.suborigin(null)
  • html.window?.document?.window?.location
  • html.window?.document?.parent?.namespaceUri(null)
英文:

Is there a way to prevent/detect any website to embed the flutter webapp I've published to a domain?

I created a project on Firebase and hosted a Flutter webapp in it: https://friendlyeats-flutter-codelab.firebaseapp.com/#/.

I noticed that if I add the url in an iFrame, the webapp shows inside that iFrame in any website. Is there a way to prevent this?

I tried using Uri.base.host, Uri.base.origin and Uri.base.authority (by displaying a message on screen with these values in order to see if I can detect the host that's embedding the webapp) but they all show friendlyeats-flutter-codelab.firebaseapp.com as a value, even if I'm embedding the webapp in an iFrame in a different domain (i.e. some-website.com).

May there be some way to detect the iFrame host using Dart/Flutter?

EDIT:

I've also tried the following with the same results

html.window?.location?.host
html.window?.location?.href
html.window?.location?.origin
html.window?.origin
html.window?.document?.origin //null
html.window?.document?.domain
html.window?.document?.baseUri
html.window?.document?.suborigin //null
html.window?.document?.window?.location
html.window?.document?.parent?.namespaceUri //null

答案1

得分: 2

请将以下内容翻译为中文:

将下面的导入语句添加到类中:

import 'dart:html' as html;

然后,您可以通过调用 html.document.referrer 来访问主机 URL。如果它返回为空,则表示网站未嵌入。如果它返回一个值(这个值可能不一定是主要的网站 URL - 例如,对于 Google 站点,它返回 https://www.gstatic.com/ 而不是 some-website.com),那么您可以显示不同的错误屏幕或任何您想要的内容。

英文:

Add the next import to the class:

import 'dart:html' as html;

Then you can access the host url by calling html.document.referrer. If it returns empty then the website is not being embedded. If it returns a value (which might not necessary be the main website url - i.e. for a Google Sites it returns https://www.gstatic.com/ instead of some-website.com) then you can show a different error screen or whatever you want.

huangapple
  • 本文由 发表于 2023年5月22日 02:56:43
  • 转载请务必保留本文链接:https://go.coder-hub.com/76301447.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定