Encoding issue After Activating Cloudflare

#1

Hello I need help, please. We really would like to use Cloudflare on our new website which is set to launch soon. After activating Cloudflare we were faced with an encoding issue with special characters appearing all over the page. You can see this by visiting www.eastlondonbusinessdirectory.co.za/New. Strange thing is when you refresh the page the second or third time the issue is gone and all works ok for a moment and then it is back…

I have created a custom page rule with “cache everything”, but the problem still remains. If i disable Cloudflare the issue is gone, plus i have also added AddDefaultCharset UTF-8 in .htaccess file just to make sure. What can it be, and what can we do to sort this out?

Can someone please help with this please at your earliest convenience. I’ll truly appreciate it if we get this resolved.

Best Regards,
Sean

#2

I believe you’d need to make sure your origin server sends a header that tells the cache to serve pages based on the content encoding.

Currently, I only see Vary: User Agent, which is in fact ignored by Cloudflare.

Here’s a helper on the issue:

https://www.fastly.com/blog/best-practices-using-vary-header

#3

This topic was automatically closed after 14 days. New replies are no longer allowed.

#4

#Repost as i was not notifed of a comment and the topic has since been closed, I apologise in advance. When I activate Cloudflare we have an encoding or caching issue whereby special characters appear all over the page. When I deactivate Cloudflare the website loads fine and the issue is gone.

Header response with Cloudflare deactivated:

Alt-Svc: quic=":443"; ma=2592000; v=“35,39,43,44”
Cache-Control: no-cache, must-revalidate
Connection: close
Content-Encoding: gzip
Content-Length: 8156
Content-Type: text/html; charset=UTF-8
Date: Wed, 14 Aug 2019 14:19:31 GMT
Expires: Mon, 26 Jul 1997 05:00:00 GMT
Last-Modified: Wed, 14 Aug 2019 14:19:31 GMT
Pragma: no-cache
Server: LiteSpeed
Set-Cookie: pmd_template=deleted; expires=Thu, 01-Jan-1970 00:00:01 GMT; Max-Age=0; path=/New/; domain=www.eastlondonbusinessdirectory.co.za
Set-Cookie: pmd_template=listimia; expires=Fri, 13-Sep-2019 14:19:31 GMT; Max-Age=2592000; path=/New/; domain=www.eastlondonbusinessdirectory.co.za
Vary: Accept-Encoding,User-Agent
X-Powered-By: PHP/7.0.33

Header response with Cloudflare activated:

Cache-Control: no-cache, must-revalidate
CF-RAY: 50639e64dd188074-CPT
Connection: keep-alive
Content-Encoding: zlib,gzip,deflate
Content-Type: text/html; charset=UTF-8
Date: Wed, 14 Aug 2019 14:29:03 GMT
Expect-CT: max-age=604800, report-uri=“https://report-uri.Cloudflare.com/cdn-cgi/beacon/expect-ct”
Expires: Mon, 26 Jul 1997 05:00:00 GMT
Last-Modified: Wed, 14 Aug 2019 14:29:02 GMT
Pragma: no-cache
Server: Cloudflare
Set-Cookie: pmd_template=deleted; expires=Thu, 01-Jan-1970 00:00:01 GMT; Max-Age=0; path=/New/; domain=www.eastlondonbusinessdirectory.co.za
Set-Cookie: pmd_template=listimia; expires=Fri, 13-Sep-2019 14:29:02 GMT; Max-Age=2592000; path=/New/; domain=www.eastlondonbusinessdirectory.co.za
Transfer-Encoding: chunked
Vary: User-Agent
X-Powered-By: PHP/7.0.33
X-Turbo-Charged-By: LiteSpeed

I believe I might need to make sure my origin server sends a header that tells the cache to serve pages based on the content encoding, but I’m not too sure if this logic is correct because with Cloudflare activated I only see Vary: User Agent? which is in fact ignored by Cloudflare… If the logic is correct then I’m not too sure how to go about fixing this. I have tried to add a page rule from Cloudflare to cache everything and also added the following in .htaccess

 </IfModule>
AddDefaultCharset UTF-8
<IfModule mod_headers.c>
  <FilesMatch ".(js|css|xml|gz|html)$">
    Header append Vary: Accept-Encoding
  </FilesMatch>
</IfModule>

But both of the above does not work. Please, we need to have Cloudflare working on our site and I’ll be truly grateful if someone can please advise on a solution for us on how to sort this out asap please.

Thanking you kindly.

#5

I have also added a page rule to bypass all cache and still not working. Then i have read up that Cloudflare currently only [respects the Accept-Encoding vary header], but im having a hard time implementing this as it is not working when adding it to .htaccess file. Please help, what can i do to get this fixed. The script we have phpmydirectory is really slow and we rely heavily on Cloudflare for performance and the upkeep of our website.

#6

@user289, merged with original topic and re-opened. Topic will now auto-close 1 week after the last reply.

#7

Hello floripare, thank you for you time in trying to assist me. I am stumped and cannot get this resolved see above. I have also read that Cloudflare currently only [respects the Accept-Encoding vary header] so i have tried this in .htaccess:

<ifModule mod_headers.c>
Header unset Vary
Header set Vary “Accept-Encoding”
</ifModule>

But still after clearing cache we still get special characters? What is correct procedure to put in .htaccess or how to resolve this. I’ve run out of ideas…

Many thanks

#8

Hi @user289,

I’d try to identify and turn off any other compression your origin may be applying other than gzip. If you are on a shared hosting, talk to your hosting provider, as some may add compression by default. Otherwise, check your config files for any hints at compression being applied.

#9

Many thanks for the heads up Floripare will have a look and revert back!

1 Like
#10

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.