Trying to use a reference to "http" (non-ssl) in custom CSS

  • Profile Image
    blossomlab
    Asked on April 20, 2019 at 07:16 PM

    Hi There,

    I'm trying to use a reference to a namespace in some custom CSS below.

    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='%23e3e3e3' /%3E%3C/svg%3E");

    The problem is, it gets changed to this.

    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='//www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='%23e3e3e3' /%3E%3C/svg%3E");

    NOTE: the change is to the xmlns value protocol.

    The problem is, this breaks the code. Any way to preserve the non-ssl reference?

    Thanks for your help,

    - Andrew

  • Profile Image
    jherwin
    Answered on April 20, 2019 at 10:05 PM

    Since non-secure content cannot be displayed in a secure SSL page, you should inject the secure/SSL URL of the image and that should solve your problem.

  • Profile Image
    blossomlab
    Answered on April 21, 2019 at 02:17 AM

    But it's not an image. It's a namespace reference that cannot change.

    See this page: https://www.w3.org/2000/svg

    NOTE: the xml namespace reference is non-ssl, this is what browsers recognize.

  • Profile Image
    roneet
    Answered on April 21, 2019 at 03:29 AM

    You would have to use a custom Javascript code to change the xmlns URL. Currently, it is not possible to inject a custom Javascript code with JotForm. In order to do this you would have to download the source code of the Form and do it at your end.

    To get the full source code you may refer to this guide:

    https://www.jotform.com/help/104-How-to-get-the-Full-Source-Code-of-your-Form

    Thanks.

  • Profile Image
    blossomlab
    Answered on April 23, 2019 at 01:53 PM

    Understood, thanks for the reply.

    I think I'll end up having to use a different CSS method because we use the embed install option.