downloadable font: rejected by sanitizer /fonts/fontawesome-webfont.woff2?v=4.6.3

[jujes]

General question

Development branch build of reactioncommerce:reaction

Someone know about this font issue?

unreachable code after return statement f474c6bbefe48578647e20819f049973ea16351c.js:299:23956
unreachable code after return statement f474c6bbefe48578647e20819f049973ea16351c.js:299:24274
unreachable code after return statement f474c6bbefe48578647e20819f049973ea16351c.js:299:23956
unreachable code after return statement f474c6bbefe48578647e20819f049973ea16351c.js:299:24274
mutating the [[Prototype]] of an object will cause your code to run very slowly; instead create the object with the correct initial [[Prototype]] value using Object.create f474c6bbefe48578647e20819f049973ea16351c.js:26:20071
downloadable font: rejected by sanitizer (font-family: "FontAwesome" style:normal weight:normal stretch:normal src index:1) source: https://rootsoap.com/fonts/fontawesome-webfont.woff2?v=4.6.3 /:6985:12
downloadable font: rejected by sanitizer (font-family: "FontAwesome" style:normal weight:normal stretch:normal src index:2) source: https://rootsoap.com/fonts/fontawesome-webfont.woff?v=4.6.3 /:6985:12
downloadable font: rejected by sanitizer (font-family: "FontAwesome" style:normal weight:normal stretch:normal src index:3) source: https://rootsoap.com/fonts/fontawesome-webfont.ttf?v=4.6.3 /:6985:12

Thanks in advance,

[aaronjudd]

Prequel is the development branch. Need to look into that error though, that's the first I've seen of it. @jshimko ideas?

[jshimko]

I can't reproduce this, but a quick Google search turns up a few common causes for that error with Firefox.

Memory issues or a corrupt font file...

You get this error if you run out of memory when loading the fontfile or if there is something wrong with the layout (contents) of the fontfile. This is a protection against bad or malicious font files.

The query string in the font path (that guy is getting the query string added by a different preprocessor, but we already have them by default before it's even processed)

Single quotes instead of double quotes (seriously Firefox??)

Not sure if it's any of these though. As I said, I can't reproduce this. What version of Firefox are you using? Does it happen for you here? https://hello.reactioncommerce.com/ (that's the development branch as of today)

[jujes]

@aaronjudd @jshimko also in chrome have the same issue:

my browser version: chrome: 51.0.2704.106 (64-bit) firefox: 47.0.1

I user jwilder/nginx-proxy + custom

FROM jwilder/nginx-proxy:latest

RUN { \
      echo 'fastcgi_buffers 4 256k;'; \
      echo 'fastcgi_buffer_size 128k;'; \
      echo 'fastcgi_busy_buffers_size 256k;'; \
    } > /etc/nginx/conf.d/my_proxy.conf

RUN sed -i 's/^http {/&\n    proxy_busy_buffers_size   256k;/g' /etc/nginx/nginx.conf && \
    sed -i 's/^http {/&\n    proxy_buffers   4 256k;/g' /etc/nginx/nginx.conf && \
    sed -i 's/^http {/&\n    proxy_buffer_size   128k;/g' /etc/nginx/nginx.conf

Navigated to https://rootsoap.com/
(index):1 Failed to decode downloaded font: https://rootsoap.com/fonts/fontawesome-webfont.woff2?v=4.6.3
(index):1 OTS parsing error: invalid version tag
(index):1 Failed to decode downloaded font: https://rootsoap.com/fonts/fontawesome-webfont.woff2?v=4.6.3
(index):1 OTS parsing error: invalid version tag
(index):1 Failed to decode downloaded font: https://rootsoap.com/fonts/fontawesome-webfont.woff?v=4.6.3
(index):1 OTS parsing error: invalid version tag
(index):1 Failed to decode downloaded font: https://rootsoap.com/fonts/fontawesome-webfont.woff?v=4.6.3
(index):1 OTS parsing error: invalid version tag
(index):1 Failed to decode downloaded font: https://rootsoap.com/fonts/fontawesome-webfont.ttf?v=4.6.3
(index):1 OTS parsing error: invalid version tag
(index):1 Failed to decode downloaded font: https://rootsoap.com/fonts/fontawesome-webfont.ttf?v=4.6.3
(index):1 OTS parsing error: invalid version tag

Climate code

docker version 1.11.2, build b9f10c9 docker-compose version 1.7.1, build 0a9ab35

Steps to Reproduce the Behavior

git clone -b development https://github.com/reactioncommerce/reaction.git reaction-dev
cd reaction-dev
cp docker/packages.example docker/packages-old
docker build -t jujes/reaction-dev

proxy run

docker run -d \
-p 80:80 \
-p 443:443 \
-v /home/vagrant/up/proxy/vhost.d:/etc/nginx/vhost.d:ro \
-v /home/vagrant/up/proxy/certs:/etc/nginx/certs \
-v /var/run/docker.sock:/tmp/docker.sock:ro \
--name=proxy \
--restart=always \
jujes/nginx-proxy

docker-compose.yml

mongo.rootsoap:
  restart: always
  image: mongo:latest
  command: mongod --smallfiles
  container_name: mongo.rootsoap

rootsoap:
  restart: always
  image: jujes/reaction-dev
  links:
    - mongo.rootsoap
  container_name: rootsoap
  environment:
    - VIRTUAL_HOST=www.rootsoap.com,rootsoap.com
    - ROOT_URL=http://rootsoap.com
    - MONGO_URL=mongodb://mongo.rootsoap:27017/rootsoap
    - REACTION_EMAIL=admin@rootsoap.com
    - REACTION_USER=admin
    - REACTION_AUTH=password

reaction up

docker-compose up -d

[aaronjudd]

Right now, the font awesome fonts are being copied by the npm post-install script from the npm package into the public/fonts directory. This must not be happening.

[jujes]

10MB diference between prequel and my reaction-dev if I use prequel

unreachable code after return statement f474c6bbefe48578647e20819f049973ea16351c.js:299:23956
unreachable code after return statement f474c6bbefe48578647e20819f049973ea16351c.js:299:24274
unreachable code after return statement f474c6bbefe48578647e20819f049973ea16351c.js:299:23956
unreachable code after return statement f474c6bbefe48578647e20819f049973ea16351c.js:299:24274
mutating the [[Prototype]] of an object will cause your code to run very slowly; instead create the object with the correct initial [[Prototype]] value using Object.create f474c6bbefe48578647e20819f049973ea16351c.js:26:20071

docker ps -a

reactioncommerce/prequel   latest              e6fcaa78d335        22 hours ago        881 MB
jujes/reaction-dev         latest              700ad230a52a        17 hours ago        879.6 MB 

[jshimko]

@jujes Does the problem happen here? https://hello.reactioncommerce.com/

[jujes]

@jshimko no, here capture about https://hello.reactioncommerce.com/

[jshimko]

I can't even reproduce this on your site.

[jujes]

@aaronjudd @jshimko the site what you are looking rootsoap.com run reactioncommerce/prequel.

For develop propose I modified /etc/hosts and add this domain to build and deploy locally...

Now I move the development scripts online to look if you can see the issue...

please check: rootsoap.com

[jshimko]

Yep. I get the error now. Only on your site though. I still don't get it anywhere else.

[jujes]

@jshimko any idea for this? @aronjudd I think font-awesome: download failed, how I can know this?

1MB~ difference SIZE own: 661.4 MB prequel:662.8 MB

REPOSITORY                     TAG                 IMAGE ID            CREATED             SIZE
jujes/r.dev                    latest              bd62e16d52b3        5 seconds ago       661.4 MB
reactioncommerce/prequel       latest              5d65eefaff43        3 hours ago         662.8 MB

I build it again and get the same issue in three different machines (VPS, VirtualBox, BareMetal)

in chrome the issue appear as:

downloadable font: rejected by sanitizer (font-family: "FontAwesome" style:normal weight:normal stretch:normal src index:1) source: http://rootsoap.com/fonts/fontawesome-webfont.woff2?v=4.6.3 /:6985:12
downloadable font: rejected by sanitizer (font-family: "FontAwesome" style:normal weight:normal stretch:normal src index:2) source: http://rootsoap.com/fonts/fontawesome-webfont.woff?v=4.6.3 /:6985:12
downloadable font: rejected by sanitizer (font-family: "FontAwesome" style:normal weight:normal stretch:normal src index:3) source: http://rootsoap.com/fonts/fontawesome-webfont.ttf?v=4.6.3

here the terminal error output when I build:

debconf: delaying package configuration, since apt-utils is not installed
Error checking path, continuing { [Error: Cannot find module '/usr/lib/node_modules/phantomjs-prebuilt/lib/location'] code: 'MODULE_NOT_FOUND' }
npm WARN lifecycle reaction@0.14.0~postinstall: cannot run in wd %s %s (wd=%s) reaction@0.14.0 cp -R node_modules/font-awesome/fonts ./public/ /var/src
npm WARN lifecycle meteor-dev-bundle@0.0.0~install: cannot run in wd %s %s (wd=%s) meteor-dev-bundle@0.0.0 node npm-rebuild.js /var/www/bundle/programs/server
npm WARN meteor-dev-bundle@0.0.0 No description
npm WARN meteor-dev-bundle@0.0.0 No repository field.
npm WARN meteor-dev-bundle@0.0.0 No license field.

Regards,

[jujes]

Comparing reactioncommerce/prequel and my deploy container have this differences:

top
  hello.reactioncommerce.com
    assets/files/Media
    fonts
    index
    .
    .

top
  rootsoap.com
    resources
    index (issues)
      2 Failed to decode downloaded font: http://rootsoap.com/fonts/fontawesome-webfont.woff2?v=4.6.3
      6 OTS parsing error: invalid version tag
      2 Failed to decode downloaded font: http://rootsoap.com/fonts/fontawesome-webfont.woff?v=4.6.3
      2 Failed to decode downloaded font: http://rootsoap.com/fonts/fontawesome-webfont.ttf?v=4.6.3
    .
    .

[hrath2015]

Try running this command cp -R node_modules/font-awesome/fonts ./public/ from install directory. See if it helps.

[jujes]

thanks @hrath2015 my solution come from rebuild the container following your advice..

• get Font-Awesome master fonts into /public/resources/fonts

FontAwesome.otf
fontawesome-webfont.eot
fontawesome-webfont.svg
fontawesome-webfont.ttf
fontawesome-webfont.woff
fontawesome-webfont.woff2

• change permissions

chmod -R 775 /public/resources/fonts

• remap imports/themes/default/styles/fonts.less adding /resources/ path and removing ?v=4.6.3

@font-face {
  font-family: 'FontAwesome';
  src: url('/resources/fonts/fontawesome-webfont.eot');
  src: url('/resources/fonts/fontawesome-webfont.eot') format('embedded-opentype'), url('/resources/fonts/fontawesome-webfont.woff2') format('woff2'), url('/resources/fonts/fontawesome-webfont.woff') format('woff'), url('/resources/fonts/fontawesome-webfont.ttf') format('truetype'), url('/resources/fonts/fontawesome-webfont.svg#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

If someone know a better way to solve this issue, please let me know.

captures of my own development prequel container

[aaronjudd]

The command @hrath2015 mentioned cp -R node_modules/font-awesome/fonts ./public/ is being run by npm in the post-install step, when meteor npm install is performed in development. All I can think is that you're doing a meteor build without actually doing a meteor npm install first? (maybe this step isn't run unless it's in development mode?)

You should not have to change the less.. although that's ok, the font awesome fonts are just being put in /public/fonts (not /public/resources/fonts which is just where we put the reaction logo which is a font) .. maybe we should consolidate and pick one though..
Note that meteor strips off the "public" so the dir path in less should just be /fonts if you copy to public/fonts.

Permissions changes shouldn't be necessary, as that should be made public by meteor, but shouldn't hurt either.

[jujes]

@aaronjudd true in order with your explanation all what I need is put Font-Awesome in /public/fonts

• step by step

git clone -b development https://github.com/reactioncommerce/reaction.git reaction.dev
cd reaction.dev && cd public && mkdir fonts && cd fonts
wget https://github.com/FortAwesome/Font-Awesome/raw/master/fonts/FontAwesome.otf && wget https://github.com/FortAwesome/Font-Awesome/raw/master/fonts/fontawesome-webfont.eot &&  wget https://github.com/FortAwesome/Font-Awesome/raw/master/fonts/fontawesome-webfont.svg && wget https://github.com/FortAwesome/Font-Awesome/raw/master/fonts/fontawesome-webfont.ttf && wget https://github.com/FortAwesome/Font-Awesome/raw/master/fonts/fontawesome-webfont.woff && wget https://github.com/FortAwesome/Font-Awesome/raw/master/fonts/fontawesome-webfont.woff2
cd ../ && chmod -R 775 fonts

• build

cd ~/reaction.dev
docker build -t own/prequel-dev .

• deploy via docker-compose.yml

reaction:
  image: own/prequel-dev
  links:
    - mongo
  ports:
    - "80:80"
  environment:
    ROOT_URL: "http://rootsoap.com"
    MONGO_URL: "mongodb://mongo:27017/meteor"
    REACTION_EMAIL: "admin@rootsoap.com"
    REACTION_USER: "admin"
    REACTION_AUTH: "password"

mongo:
  image: mongo:latest
  ports:
    - "27017:27017"
  command: mongod --storageEngine=wiredTiger

mongo-express:
  image: mongo-express:latest
  ports:
    - "8081:8081"
  links:
    - mongo

[jshimko]

Assuming you used the standard Dockerfile (which your command implies), you don't need to manually copy over the fonts. It already does it for you when it runs meteor npm install because the package.json runs this command every time you install NPM modules:

cp -R node_modules/font-awesome/fonts ./public/

I can confirm has been working too. Aside from checking inside a freshly built container to make sure the fonts directory is there, I also noticed your site had FontAwesome loading (see my images posted above). The only way that could work is if those font files were successfully moved over to the public folder. So I suspect there's something more to the problem. But since I can't reproduce it anywhere else, I'm inclined to think it's something with your particular build.

[ingenial]

I que the same error in firefox but not in chrome file:///root/Pictures/Selection_007.png

[jshimko]

This has been fixed by #1223.