切换自定义域名后Leaflet地图全屏按钮失效问题求助

I’ve helped several users troubleshoot this exact issue when deploying Shiny apps to custom HTTPS domains with the Professional Plan. The problem boils down to a mixed-content error: your HTTPS-loaded app is trying to fetch the Leaflet fullscreen button’s icon over HTTP, which modern browsers block for security reasons. Here’s how to fix it:

1. Swap the Icon for an HTTPS CDN Version #

The fastest fix is to override the default icon with one hosted on an HTTPS CDN. Add this custom CSS to your Shiny UI:

library(shiny)
library(leaflet)

ui <- fluidPage(
  tags$head(
    tags$style(HTML("
      .leaflet-control-fullscreen a {
        background-image: url('https://cdnjs.cloudflare.com/ajax/libs/leaflet.fullscreen/2.4.0/Fullscreen.png') !important;
        background-size: 26px 26px; /* Match original icon dimensions */
      }
    "))
  ),
  leafletOutput("map")
)

server <- function(input, output) {
  output$map <- renderLeaflet({
    leaflet() %>%
      addTiles() %>%
      addFullscreenControl() # Don't forget to include this control
  })
}

shinyApp(ui, server)

The !important flag ensures this CSS takes precedence over Leaflet’s default styling, forcing the icon to load securely over HTTPS.

2. Host the Icon Locally (More Self-Contained) #

If you prefer not to depend on external CDNs, host the icon directly in your app:

• Download the official Leaflet fullscreen icon and save it to your app’s www/images/ folder (create the folder if it doesn’t exist).
• Update your CSS to use the local file path:

.leaflet-control-fullscreen a {
  background-image: url('images/Fullscreen.png') !important;
  background-size: 26px 26px;
}

This guarantees the icon is served over the same HTTPS protocol as your app, eliminating mixed-content warnings entirely.

3. Double-Check Your SSL Configuration #

While Shiny’s Professional Plan handles most SSL setup automatically, confirm your custom domain has a valid SSL certificate and that all HTTP traffic redirects to HTTPS. This prevents any accidental insecure resource requests from slipping through.

Root Cause Explained #

Browsers block "mixed content" to protect users: when a page is loaded over HTTPS, every resource (images, scripts, styles) must also use HTTPS. The default Leaflet fullscreen control uses an HTTP URL for its icon, which gets blocked—this is why the button fails to work correctly.

内容的提问来源于stack exchange，提问作者Leo Lin