https from style.css url()s?

  • Resolved wpweaver

    (@wpweaver)


    13 years, 7 months ago

    I have a theme that dynamically generates an external style.css file that isn’t in the theme directory (it needs to work on multisite so each user can have an individual style.css). Thus, using a background url() in the .css file can’t use a relative path – has to be the full https:// path. But now those references generate non-https errors.

    Any easy solution to this? I could easily add an option for the user to check that “This site is using https://” that would then put https:// in the style.css url()’s, but I don’t know if that will break non-secure pages.

    Thanks for any input on this. I have some users who are using your plugin to get https://, but their sites break on the .css url()s.

    Thanks for ideas or help!

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author mvied

    (@mvied)

    Hey wpweaver,

    Can you show me how you’re generating that URL?

    Thanks,
    Mike

    Thread Starter wpweaver

    (@wpweaver)

    The CSS URL is being generated dynamically by the theme code, and depends on user settings. For example, the user can specify a custom graphic to use as list bullets, and that custom graphic can be anywhere – usually on the same site, probably within the media library path.

    The style.css file is not saved in the “standard” theme directory, but is saved in the /uploads directory. The location, and even the name of the /uploads directory is variable, and on MultiSite versions, will vary depending on which user it is. So even when default theme graphics are included (for gradients, for example), the location of those images are known, but the location of the actual style.css file is not known.

    Thus, using relative paths to the style url() graphics is not an option – they have to be a full https:// address.

    So I’m assuming that it would be impossible, or impractical to the extreme, to try to filter the url()s within a .css file. Thus, my basic question is: if the url() tags within a style.css file use https:// instead of https://, will they still work when non-secure pages on the site are being displayed?

    Apparently, it turns out that when the style code is included in-line in the <head> block (instead of being included from a file), that everything is fine – even though the url()’s in the inline code use https://, they don’t generate an insecure access. This leads me to believe that your plugin is filtering all output and changing all https:// to https:// more or less blindly, which seems like a reasonable approach.

    Since my theme has an option to include the css inline rather than via a file, at worst case the user could use that for secure sites. But there are other good reasons to put the dynamically generated style into a file, and it would be preferable to keep that option.

    My basic personal inexperience in just what an https:// reference from a .css file will really do is the reason for my question here.

    Plugin Author mvied

    (@mvied)

    Hey wpweaver,

    You can use the parse_url function on the generated URL to create a relative path to the image. You’d obviously only want to do that to local images.

    parse_url($url,?PHP_URL_PATH);

    Thanks,
    Mike

    Thread Starter wpweaver

    (@wpweaver)

    That doesn’t help. It only gives a url relative to the file calling the function, not relative to where the final generated .css file is.

    So can I infer from your answer that an https:// reference embedded in a .css file will cause an error if used on a non-secure page? I would try it myself, but I just don’t have access to a site that can to https.

    Plugin Author mvied

    (@mvied)

    Hey wpweaver,

    No, it parses a given URL and returns an array of the parts. Giving it PHP_URL_PATH as the second argument will only return the URL path, which is everything after the domain name (not including the query). This leaves a path that begins with /. Relative URL’s that begin with / start from the root of the current domain.

    I checked out the source to your theme and it seem that you use get_template_directory_uri() to generate your images (which is what I was trying to ask you). Replace that with parse_url(get_template_directory_uri(), PHP_URL_PATH) and you’ll get relative URL’s to the images that are agnostic to SSL. This will fix the issues my users are having using your theme.

    To answer your question, there is no harm in loading an HTTPS image over HTTP, only the other way around. However, HTTPS is slow due to encryption, so it’s best to avoid it whenever it’s not necessary.

    Thanks,
    Mike

    Thread Starter wpweaver

    (@wpweaver)

    Sorry I misunderstood your question.

    And thanks for the answer. When I tested the parse_url, the results looked like they were generated based on the location of the calling file, but upon your new input, and a second look, I see what is going on and I’m sure your solution will work.

    It is so difficult to know and understand all the details of where things are in WordPress, and how to access them. I’m sure you must know all the ins and outs of https and how it relates to files, while I’m still figuring out all the aspects of theme building. I appreciate your patience.

    Thanks for the help. Perhaps this whole conversation will help others who need to generate https agnostic references into css files.

    Plugin Author mvied

    (@mvied)

    Hey wpweaver,

    Not a problem, I probably could have clarified a bit more, but I was writing my responses from my iPhone, lol.

    To be honest, when I started writing this plugin, I knew relatively little of SSL (other than it encyrpts the connection and that everything on a page must be loaded over HTTPS or an error occurs). Writing this plugin has taught me a lot, and I learn more all the time.

    Good luck with your theme. ??

    Thanks,
    Mike

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘https from style.css url()s?’ is closed to new replies.