Safari blocks dependency files on localhost

Question

rastislavliptak OP

Created Sep ’24

Replies 2

Boosts 1

Participants 3

Hello,

I've encountered a problem in Safari where if I have an application hosted locally, it causes the files of dependencies such as CSS, JS, SVG. etc. to not load. Interestingly, every time the same page refreshes, different files are not loaded and it is very random which files are not loaded at which time. The error I see in the console is "Failed to load resource: unable to parse response" and for websockets I get: "WebSocket connection to 'ws://127.0.0.1:8000/socket.io/?EIO=4&transport=websocket&sid=MuZEbWIVEKZ2OJZAAABi' failed: WebSocket is closed before the connection is established.". Interestingly, the problem only appears when the application is hosted locally, when it is hosted in the cloud, the problem does not appear. Similarly, the problem only appears in Safari. I'm using macOS 15.0 (24A335) and Safari version 18.0 (20619.1.26.31.6). Have you encountered such a problem and do you have any idea how to solve this problem?

Thank you for your reply.

Boost

Answer 1

Engineer OP

Apple

Sep ’24

Please see WKURLSchemeHandler which can also load local resources.

For example:

class LocalLoaderCustomSchemeHandler: NSObject, WKURLSchemeHandler {
    
    func webView(_ webView: WKWebView, start urlSchemeTask: WKURLSchemeTask) {
        guard let url = urlSchemeTask.request.url else {
            return
        }
//... a few lines later:
} else if type == LocalObjectType.css.rawValue {
            if let resource = Bundle.main.url(forResource: "style", withExtension: "css"),
               let resourceData = try? Data(contentsOf: resource) {
                data = resourceData
                response = URLResponse(
                    url: url,
                    mimeType: "text/css",
                    expectedContentLength: data!.count,
                    textEncodingName: nil)
            }
        } else if type == LocalObjectType.javascript.rawValue {
            if let resource = Bundle.main.url(forResource: "script", withExtension: "javascript"),
               let resourceData = try? Data(contentsOf: resource) {
                data = resourceData
                response = URLResponse(
                    url: url,
                    mimeType: "text/javascript",
                    expectedContentLength: data!.count,
                    textEncodingName: nil)
            }
        } else if type == LocalObjectType.png.rawValue {
            if let resource = Bundle.main.url(forResource: "image", withExtension: "png"),
               let resourceData = try? Data(contentsOf: resource) {
                data = resourceData
                response = URLResponse(
                    url: url,
                    mimeType: "image/png",
                    expectedContentLength: data!.count,
                    textEncodingName: nil)
            }
        }

Hopefully this helps.

Rico

WWDR - DTS - Software Engineer

0

Answer 2

besttof OP

Sep ’24

It seems that I have the same issue; I'm running a server on a local (or local network) machine and when I make a http connection with it Safari randomly doesn't load resources (such as css or svg files). Sometimes it even doesn't load the main page. I don't see any errors in the console, just randomly closed connections.

Rico's answer seems to assume the resource is local to the app, while my (and I assume rastislavliptak's) issue is with files hosted on a local server.

1