How to see HTML rendered response of AJAX request in Network tab in Safari browser? - safari

I see raw HTML code instead of rendered response as we can see in Chrome and other browsers
Here is screenshot of what I see
Screenshot
I want to see this response rendered as HTML

Related

Preview HTML in Safari Web Inspector

When I open Web Inspector / Network / Any Request / Preview, I want to see rendered HMTL, as Google Chrome does. But Safari shows only raw HMTL. Is there any option to makes it render? Thank you!
Safari:
Google Chrome:

iFrame refused to load inside a React Native Webview

I'm building a React Native (expo) app and I need to display an iFrame with some content that I do not control.
I'm using react-native-webview to display a webview like so
<WebView
ref={ref}
onMessage={handleMessages}
injectedJavaScript={injectedJs}
source={{
html: `
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.some-script-I-do-not-control.js"></script>
<title>Pge title</title>
</head>
<body>
</body>
</html>
`
}}
originWhitelist={['*']}
/>
After the page loads, the script that I do not control adds an iFrame to the body and displays stuff. In my case the webview loads fine and the script executes without error until the iFrame tries to load, then I get the classic: (in the webview's console)
Refused to load https://the-iframe-website.wow/ because it does not appear in the frame-ancestors directive of the Content Security Policy.
Since I do not control the website loaded by the iFrame, I cannot play with the content-security-policy, but when I inspect the network request I can see that the CSP header actually includes frame-ancestors * which is supposed to be the wildcard to allow any url if I read the w3 doc correctly. Also, this same script setup works perfectly fine in the browser and on desktop, it just refuses to load inside a webview, which is weird.
Has anyone ever seen something like this or have ideas of things to try? Because I'm currently running out 🥲.
All of this is on iOS, haven't tried on Android yet because I do not have an Android device atm.
If anyone stumbles on this, the error was due to the fact that I was loading the iFrame in an about:blank (created by react-native-webview) and this is not supported by CSP.
I had to host a real blank page somewhere to embed the iFrame inside and I got it working!

Using form submit from script on extension page

I'm developing an extension for Chrome, Firefox and Safari and I'm adding a feature that uses a form.submit style post to initiate a search on another web site.
I have the code working in Chrome using the method described in this post:
Chrome Extension Development - POST to new tab
However, it doesn't work in the Safari extension. There are two problems. The first is that the sendMessage to the new tab never gets to the post script. I found a solution to that: in Safari it doesn't treat a script loaded by an extension web page as a content script. So I have to use runtime.sendMessage rather than tabs.sendMessage.
The second problem is where I am stuck. The post script submits the form but there appears to be an error on the server side and I am unable to see what it is.
In the Safari Web Inspector the "Preserve log" doesn't keep the log when this error occurs. The server loads a new page (with blank search fields) and I can't see any info on the request header sent with the post or the response since the Web Inspector logs are cleared.
I suspect it may be a security issue since Safari tends to be more strict. Any ideas on any ways around this?

Safari App Extension content script not loaded on Safari error page?

When running a Safari App Extension, if Safari shows "Failed to open page", your content script isn't loaded. In this sort of scenario, it might be nice to redirect the user to a new url or suggestions page such as "did you mean...".
Is it possible to get a Safari App Extension's content script to load when a Safari error page is showing up?
No, it does not appear to be possible.
Based on Apple's Safari App Extensions "About Permissions for Scripts and Style Sheets" documentation, I'm deducing that script injection only works on web content from http:// or https:// schemes, while error pages are loaded from local files.
A URL pattern takes the form Scheme://Domain/Path.
(...)
Scheme can be http or https. (...)
The asterisk character can be used anywhere in the domain or path, but not in the scheme.
For reference, here's the path of a Safari 13 error page template.
file:///Applications/Safari.app/Contents/Resources/en.lproj/StandardErrorPage.html

Load URL is not properly loaded on Apps' page

The app page located under the apps tab is not rendering correctly. The request is coming in fine with the signed payload but the iframe (that loads the load URL) renders an empty page every time I visit the app page.
I try opening the exact page in a new tab and it's rendering fine:
https://staging02.pathdefender.com/app/bigcommerce/load?signed_payload=eyJ1c2VyIjp7ImlkIjo0NDA2MTYsImVtYWlsIjoiZGVubmlzQHRydXN0ZWRzaXRlLmNvbSJ9LCJjb250ZXh0Ijoic3RvcmVzL24yaXMwYTRjIiwic3RvcmVfaGFzaCI6Im4yaXMwYTRjIiwidGltZXN0YW1wIjoxNDQyODYyNjQzLjk4MzgyNTR9.MjFmNWFhZGU4ZjkyN2NkY2I4YzEwOTkyNzdjYjA4ZGU0OWE5MjU4MzRlZTYwNDc4ODNhNzU2MDliYWJlMmZlZA==
Do you know what's wrong with the page?