fix(header, footer): resolve CSP violations with box shadow (#27560)

Issue number: N/A

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

The `ion-header` and `ion-footer` use a base64 encoded image for a box
shadow instead of using the CSS box-shadow property directly. The use of
the background image creates CSP violations. The historic reasoning of
using an image instead of box shadow was to improve scroll performance.
Browsers and devices have improved a lot since that was implemented (5
years ago).

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Updates the usage of `ion-header` and `ion-footer` to use a box
shadow. The value comes from Material's web implementation:
https://material-components.github.io/material-components-web-catalog/#/component/top-app-bar

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

---------

Co-authored-by: ionitron <hi@ionicframework.com>

core/src/components/header/header.md.scss

@@ -4,28 +4,14 @@
 // Material Design Header
 // --------------------------------------------------
 
-.header-md::after {
-  // Using a datauri png background image for improved scroll
-  // performance rather than using a box-shadow. There is a
-  // noticeable performance difference on older Android devices.
-  @include position(null, null, -$header-md-box-shadow-height, 0);
-  @include background-position(start, 0, top, -2px);
-
-  position: absolute;
-
-  width: 100%;
-  height: $header-md-box-shadow-height;
-
-  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAHBAMAAADzDtBxAAAAD1BMVEUAAAAAAAAAAAAAAAAAAABPDueNAAAABXRSTlMUCS0gBIh/TXEAAAAaSURBVAjXYxCEAgY4UIICBmMogMsgFLtAAQCNSwXZKOdPxgAAAABJRU5ErkJggg==);
-  background-repeat: repeat-x;
-
-  content: "";
+.header-md {
+  box-shadow: $header-md-box-shadow;
 }
 
 .header-collapse-condense {
   display: none;
 }
 
-.header-md.ion-no-border::after {
-  display: none;
-}
+.header-md.ion-no-border {
+  box-shadow: none;
+}

core/src/components/header/header.md.vars.scss

@@ -3,5 +3,6 @@
 // Material Design Header
 // --------------------------------------------------
 
-/// @prop - Height of the header box shadow
-$header-md-box-shadow-height:                    5px !default;
+/// @Prop - Box shadow of the header
+$header-md-box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14),
+  0 1px 10px 0 rgba(0, 0, 0, 0.12) !default;