Webview can not open any URL other than https://flutter.dev

vzblyfcode commented 2 weeks ago

Has your issue been reported?

[X] I have searched the existing issues and confirm it has not been reported.
[X] I give permission for members of the FlutterFlow team to access and test my project for the sole purpose of investigating this issue.

Current Behavior

I want my flutter Webview to open my website: https://digitalcollections.nypl.org/items/786175a0-942e-0132-97b0-58d385a7bbd0/book#page/1/mode/2up

Expected Behavior

Expected it to load similarly to https://flutter.dev

Steps to Reproduce

create new page
add web view widget
change website url
and run

Reproducible from Blank

[X] The steps to reproduce above start from a blank project.

Bug Report Code (Required)

IT4klc/qw5dIseFG1pP1bcFFvDgWJlB8TL0/utV+ay8YGIytBu0cY8n7XFpBTbSraVNcHFmKhj4B7tHFiITTLfoFHzabGd061s1fWxbee2igWpuVCbmedmhQDdFhC0yA16u3gB4lPtttWHwC3Gauf9+WTirDFOu/Zwh9f6PHaOI=

Context

Trying to achieve with Flutter, what I already wrote code for. Can't even use my custom code, or don't know how to translate this to flutter syntax.

// GreenBookExperienceActivity.kt package com.example.experiences.ui.activities

import com.example.experiences.base.BaseActivity import android.os.Bundle import android.webkit.WebView import androidx.webkit.WebViewClientCompat import androidx.activity.OnBackPressedCallback import android.net.http.SslError import android.webkit.SslErrorHandler import android.util.Log

class GreenBookExperienceActivity : BaseActivity() {

private lateinit var webView: WebView

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    webView = WebView(this)
    setContentView(webView)

    setupWebView()

    val callback = object : OnBackPressedCallback(true) {
        override fun handleOnBackPressed() {
            if (webView.canGoBack()) {
                webView.goBack()
            } else {
                finish()
            }
        }
    }

    onBackPressedDispatcher.addCallback(this, callback)
}

private fun setupWebView() {
    webView.apply {
        settings.apply {
            javaScriptEnabled = true
            setAllowFileAccess(false)
            setAllowContentAccess(false)
        }
        webViewClient = object : WebViewClientCompat() {
            override fun shouldOverrideUrlLoading(view: WebView, url: String): Boolean {
                return !url.startsWith("https://digitalcollections.nypl.org")
            }

            override fun onReceivedError(view: WebView, errorCode: Int, description: String, failingUrl: String) {
                Log.e("WebViewError", "Error loading page: $description")
            }

            override fun onReceivedSslError(view: WebView, handler: SslErrorHandler, error: SslError) {
                Log.e("WebViewSSL", "SSL Error: ${error.toString()}")
                handler.cancel() // Change based on your security policy
            }
        }
        loadUrl("https://digitalcollections.nypl.org/items/786175a0-942e-0132-97b0-58d385a7bbd0/book#page/1/mode/2up")
    }
}

}

Visual documentation

Additional Info

No response

Environment

- FlutterFlow version: 
- Platform:
- Browser name and version:
- Operating system and version affected:

General

[ ] I was collaborating with other users in the same project prior to data loss
[ ] I navigated between different project views leading up to data loss
[ ] The UI was running very slowly prior to data loss
[ ] A crash or other bug occurred prior to data loss
[ ] Data was not saved in a snapshot
[ ] I was using flutterflow from multiple devices
[ ] I was using flutterflow from multiple platforms (e.g. both web and MacOS Desktop app)

Relative to the time the changes were made, data was lost within

[ ] 1 minute
[ ] 1 hour
[ ] 1 day
[ ] 1 week

When following my steps to reproduce, data loss happens

[ ] ~100% of the time
[ ] ~50% of the time
[ ] ~10% of the time
[ ] ~1% of the time
[ ] Very rarely or only encountered once

paulperez-dev commented 2 weeks ago

Hi @vzblyfcode, thanks for your report. The error message "Refused to display 'https://digitalcollections.nypl.org/' in a frame because it set 'X-Frame-Options' to 'sameorigin'" indicates that the website you're trying to display in an iframe on your WebView is configured to prevent it from being embedded in an iframe from a different origin. The 'sameorigin' value for the X-Frame-Options header means that the page can only be displayed in a frame if the request originated from the same origin as the page itself.

vzblyfcode commented 2 weeks ago

@paulperez-dev Thank you. How do I fix this?

paulperez-dev commented 2 weeks ago

It is a security measure from the developer of the website. You can see the message on the developer console of the browser.

vzblyfcode commented 2 weeks ago

@paulperez-dev

Thanks. I understand that part. What I'm referring to is how to fix it in the Flutter Flow UI, as my class above allowed me to render it in an Android App locally, and so shouldn't I be able to render it in Flutter flow as well?

paulperez-dev commented 2 weeks ago

It may be because it tries to render the web natively on the web but the device is using the package.

paulperez-dev commented 1 week ago

Closing this issue since we haven't heard back from you. If you are still facing the problem please submit a new issue. Have a great day!

FlutterFlow / flutterflow-issues