Web servers often serve WASM with incorrect MIME type; better docs/errors needed

[Toad06]

Hello,

I get an error when using a Web build on my site. Here is what is logged in the console in Firefox (Windows):

Loading SWF file images/file.swf
TypeError: Response has unsupported MIME type
Got SWF data
TypeError: Response has unsupported MIME type
Serious error loading Ruffle: TypeError: Response has unsupported MIME type
Serious error occured loading SWF file: TypeError: Response has unsupported MIME type

Chrome (Windows) is a bit more explicit:

TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.

It turns out the server interpreted the .wasm file as being of type "octet-stream". However, testing the build locally with WampServer has not solved the issue, despite the correct mime type being returned.

There is no issue on iPad (iPadOS 13 - Safari and Chrome), Ruffle runs as expected.

Thanks.

---

UPDATE:

Actually Apache needed an extra line in the .htaccess (even in the local server):

AddType application/wasm wasm

... and clearing browser's cache after this.

[Herschel]

The error happens because WASM files are not served with the proper MIME type of application/wasm on many web servers, and the servers often require configuration to set this.

We should add this somewhere to the docs because it is a common problem, and possibly we could even have the JS detect this when trying to instantitiate the wasm and show a better error in-page.

[Toad06]

Thanks a lot for your answer.

One last thing I would like to report about the Web build is that files that have already been played can look very messy when they are played another time (this may be a known issue).

For example:
http://ruffle-rs.s3-website-us-west-1.amazonaws.com/builds/web-demo/index.html?file=uniwar.swf

• During the intro, the ship is correctly displayed.
• When you get into the hall, the background is not blurry.
• Refresh the page and notice the differences.

This seems related to files caching, as opening the Console > Network > Checking "Disable cache" prevent this issue to happen.

Thanks again!

[Dinnerbone]

I've added some text explaining what this issue is and how to fix it for Apache and NGINX over at the "Using Ruffle" page on the wiki. For other server software we should ask them to post here so we can amend the documentation going forwards.

https://github.com/ruffle-rs/ruffle/wiki/Using-Ruffle
(specific change: https://github.com/ruffle-rs/ruffle/wiki/Using-Ruffle/_compare/fed447678a621485a79a7dc14c27898e59dc4f6a...363dd58ba231feb301e9c760c2b2ea8632eb28f4)

[Herschel]

Very helpful, thanks!

[Herschel]

Better error supplied in #1458.

[Padre2]

Hello,

I want to use Ruffle on a hosted server that uses Litespeed.
I have tried it on my localhost LAMP server after adding AddType application/wasm .wasm to the hppd.conf file.
After adding the path for the script the SWF files ran well on first try.
I did not have success with the Litespeed server and got a Ruffle error message.
Is there any information available about using with Litespeed?

[MoreporkGithub]

Thanks to Futurama for the response. I cannot access the hppd.conf file as it is a hosted server. I DID add a .htaccess file with the line "AddType application/wasm .wasm" in it, and put it on the same path as the .swf page, but it made no difference. I'll try moving the file to the root of the site and see if it helps.

[MoreporkGithub]

I added a line ("AddType application/wasm .wasm") to the existing .htaccess file in the root directory of the site. Tried accessing the Script page (which has the .swf on it) and refreshing the page. Same result. The actual error message from Ruffle is: "TypeError: Failed to execute 'compile' on 'WebAssembly': HTTP status code is not ok" It does not tell us what the http status code actually is...

[Padre2]

Further to my issue with the Litespeed server, I asked the hosting to add the wasm MIME to the mime.properties file, but was told they could only do on a VPN server.
After more searching to find the cause of the files not running , I found there were issues with the CSP settings and a CORS issue. After going through all the CSP settings I was able to get the files to run, except for one which runs, but the animation does not start.
To check if CSP settings are a possible cause, disable them and, if your files run, then enable one by one to find which settings are causing the problems. You can look in the Console for hints about this.

[MoreporkGithub]

Thanks to Padre2 for suggestions. I added appropriate settings to .htaccess but it made no difference. I read Herschel's suggestion but it is over my head. If I understand him properly he is suggesting a different way for the WASM to build. It sounds like a good idea, hope it works...

[Herschel]

With today's nightly build, it should hopefully no longer be necessary for the file to be served with the correct MIME type. If you were having trouble before, please try with the newest build and let us know how it works. Then we can start adjusting the documentation to show that this is no longer necessary.

(It's still beneficial to set the MIME type, if possible, but it's no longer required.)

[Padre2]

Thank you Herschel, that is good news. I can confirm that after installing the ruffle_nightly_2021_01_17_selfhosted files the MIME Type can be commented out., although I have left it in place after testing.

I am now left with 2 SWF files which display, but the animation does not run. One is an analogue clock for unknown reasons (how to check?) and the other a digital clock which has ActionScript 3 content.

[MoreporkGithub]

Hi Mike and thanks for the response. I installed the 17th build of Ruffle on the server, replacing the previous 11th. I then decided to change the actual page to use the example given on the Wiki for dynamically instancing the player (here’s the code): <script> window.RufflePlayer = window.RufflePlayer || {}; window.addEventListener("load", (event) => { const ruffle = window.RufflePlayer.newest(); const player = ruffle.createPlayer(); const container = document.getElementById("container"); container.appendChild(player); player.load("images/quill1.swf"); }); </script> <script src="ruffle/ruffle.js"></script> Unfortunately, it still crashes, but there is a different error message: And here’s the rest of the scrolled window: I hope this is helpful… Cheers, Pete. From: Mike Welsh <notifications@github.com> Sent: Sunday, 17 January 2021 14:51 To: ruffle-rs/ruffle <ruffle@noreply.github.com> Cc: MoreporkGithub <dashwood@EOL.co.nz>; Comment <comment@noreply.github.com> Subject: Re: [ruffle-rs/ruffle] Web servers often serve WASM with incorrect MIME type; better docs/errors needed (#400) With today's nightly build, it should hopefully no longer be necessary for the server to have the correct MIME type. If you were having trouble before, please try with the newest build and let us know how it works. Then we can start removing the MIME type stuff from the FAQs. (It's still beneficial to set the MIME type, if possible, but it's no longer required.) — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#400 (comment)> , or unsubscribe <https://github.com/notifications/unsubscribe-auth/ASNPV4ZLCNB3PI3K5P7I3T3S2I67RANCNFSM4KYLSZ7A> . <https://github.com/notifications/beacon/ASNPV4ZLL6AAM65NXJLASB3S2I67RA5CNFSM4KYLSZ7KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOFVTNIIQ.gif>

[MoreporkGithub]

Guys, I'm sorry. I replied by direct email and didn't intend for this to be published. I can't find any way to edit or delete it. The embedded images don't seem to have appeared anyway so it it is pretty pointless. I won't make the mistake again. sorry.

[MoreporkGithub]

The new error message I get from the release of the 17th is:

Error Info

Error name: CompileError
Error message: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 3c 21 44 4f @+0
Error stack:

CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 3c 21 44 4f @+0

Player Info

Allows script access: true
Player type: Object
SWF URL: images/quill1.swf
Attribute 0: undefined
Attribute 1: undefined
Attribute 2: undefined

Page Info

Page URL: https://primacomputing.co.nz/PRIMAMetro/Scripting.aspx

Browser Info

Useragent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.141 Safari/537.36 Edg/87.0.664.75
OS: Win32

Ruffle Info

Version: 0.1.0
Name: nightly 2021-01-17
Channel: nightly
Built: 2021-01-17T01:05:59.152Z
Commit: c2b768c

Hope this helps.

[Herschel]

@MoreporkGithub It looks like the WASM file is missing and is getting a 404:
https://primacomputing.co.nz/PRIMAMetro/ruffle/43f8e1e34e0629f740121b10aab750da.wasm does not exist.
Could you check to see if you extracted all of the JS and wasm files into the ruffle directory on your server?

[MoreporkGithub]

OK,

Here are the unzipped contents in the server directory:

Thanks, I appreciate your time on this.

[Herschel]

Not sure specifically what the problem is, but this file is still not accessible:
https://primacomputing.co.nz/PRIMAMetro/ruffle/43f8e1e34e0629f740121b10aab750da.wasm
Perhaps you need to set permissions on your web server to allow accessing this file.

[MoreporkGithub]

As far as I know everything in that directory is accessible, but I'll check it out. If I can't find a problem I may need to talk to the ISP who is hosting it. That could take a day or so. Will get back to you in either case.

Many thanks.

[MoreporkGithub]

OK, I checked it:

As you can see, there is an Execute box which is not checked. I tried checking it and it will not accept the change.

The permissions for the Ruffle directory say that permissions cannot be changed.

I'll talk to the ISP.

Cheers.

[MoreporkGithub]

Thanks SO much to Herschel.

I spoke with the ISP who confirmed that the problem is simply the MIME Type not being known to the server. He said it is a Windows server (which I had forgotten about) so the .htaccess file didn't work for it.

I needed to go to HELM (the server manager) and set the MIME type for wasm there.

Once I did that, it worked perfectly :-)

I'd like to say how impressed I am with the Ruffle tool and the fact that there were people prepared to help with an Open Source tool.

Sincere and deep thanks for your help.

[Herschel]

Glad it got sorted out, and thanks for posting your solution as it may be useful to others with the same server :-)

[Padre2]

Further to postings above where there were issues with MIME on Linux/Apache/Litespeed servers. This was initially solved by adding the .wasm MIME to the .htaccess file and the with the ruffle_nightly_2021_01_17_selfhosted file was able to have Flash working without the MIME in .htaccess.

Now have found a similar issue errors on a Windows server, Here .htaccess cannot be used but the following solved the problem:
In root, look for Web.config file, or create it in root. Open the file and add the lines:

<configuration>
      <system.webServer>
            <staticContent>
                    <mimeMap fileExtension=".wasm" mimeType="application/wasm" />
            </staticContent>
       </system.webServer>
</configuration>```

[MoreporkGithub]

Thanks for this, Padre2.

As noted in the thread above, I was able to solve this with help from Herschel and my ISP.

But this is a simple and universal solution for Windows and I'm sure many people will find it useful.

[discoveryX64]

Anyone know anything on how to enable .wasm files on GH-pages? I haven't gotten ruffle working on it, and i suspect it being the .wasm issue. I haven't found anything to help with it, All the webpage does is download the .swf file (note this may be because I'm using Iframes) unless you have the extension turned on (Which then it will play the game fine). If it's another problem please tell me!

-Discoveryx64

[Padre2]

Can you explain what you mean by "unless you have the extension turned on"? Which extension?

[discoveryX64]

Can you explain what you mean by "unless you have the extension turned on"? Which extension?

I meant the ruffle extension, my bad! I'm bad at clarifying things while speaking/typing (I usually have to clarify afterwards) 😅